<template>
	<div class="box">
		<!-- left start -->
		<session-record @getSessionCon="getSessionCon" @initList="getSessionlist" @getMoreList="getMoreList">
		</session-record>
		<!-- left end -->
		<!-- {{base}} -->
		<div :class="[{ none: base.isNewSess }, 'sessionBox']" ref="chatContent">
			<div v-if="base.guideIndex == 6">
				<div class="talktem"></div>
				<div class="temBtn">
					<span class="tie"></span>
				</div>
			</div>
			<div v-if="base.guideIndex == 7">
				<div class="waptalktem"></div>
			</div>
			<!-- new session start -->
			<ai-calculator v-if="base.sessionType == 2"></ai-calculator>	
			<new-session v-if="base.isNewSess && base.sessionType == 0" @createTitle="createTitle"></new-session>
			<!-- new session end -->
			<div class="quesCon clearfix" ref="chatBox" v-if="!base.isNewSess">
				<p class="loadgin" v-if="base.talkLoad">正在加载...</p>
				<div v-if="isNoSession && !base.isEnterLoad">
					<div class="quesBox clearfix">
						<div class="userPic system">
							<img :src="`${imgurl}systempic.png`" />
						</div>
						<div class="answer">
							<div class="answerBox errorAnswer">
								<div class="errorText">
									很抱歉，系统出错了！请重新创建对话。
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mianBox" v-for="(list, k) in talkList" :key="k">
				
					<div :class="[{ user: item.identity == 'user' && !base.isMobile }, { wapuser: base.isMobile }, 'quesBox clearfix']"
						v-for="(item, index) in list" :key="index">

						<!-- pdf 文件 -->
						<template v-if="item.isType == 2 || item.isType == 3">
							<div :class="[{ user: !base.isMobile }, { system: base.isMobile }, 'userPic']"
								v-if="item.identity == 'user'">
								<img v-if="useStore?.avatar" :src="`${baseurl}${useStore?.avatar}`" />
								<img v-else :src="`${imgurl}pic.jpg`" />
							</div>
							<div :class="[{ active: item.isRun }, 'userPic system']" v-else>
								<img v-if="item.isRun && base.isMobile" class="run" :src="`${imgurl}systempic.gif`" />
								<video class="videoLoad" v-if="item.isRun && !base.isMobile" muted autoplay="autoplay"
									loop="loop" :src="`${imgurl}systempic.mp4`"></video>
								<img v-if="!item.isRun" :src="`${imgurl}systempic.png`" />
							</div>
							<template v-if="item.identity == 'user'">
								<div :class="[{ selected: isSelected },`quertitle ${ispdfRE(item.content)}`]" @dblclick="copyContent(item.content)"
								>
									{{ item.content }}
								</div>
							</template>
							
							<div v-else class="znxjWidht">
								<!-- 智能询价 问题 -->
								<div
									:class="[{ active: item.count > 1 && !item.isRun }, { multiple: item.count > 3 && !item.isRun }, 'answer']">
									<div class="answerBox ">
										<div :class="[{ active: item.isRun },
											{ runing: isChat && item.isRun },
											{ long: item?.sessionArr && item?.sessionArr.length > 1 },
											'chatAnswer markdown-body']">
											<!-- 智能询价 -->
											<div class="zhinxj" v-if="item.isType == 2">
												<!-- 文档解析步骤 -->
												<div class="wenda">
													使用:智能询价
												</div>
											</div>
											<!-- 智能询价报价 -->
											<template  v-if="item.isType == 2 && item.companylist && item?.companylist.length > 0 && item.issend != 3">
												<div class="znbj">
												 	<div class="comitemC" 
														v-for="(ite,ind) in item.companylist"
														:key="ite.id"  @click="selectMulter(ite,item)" >
														<div class="xz" :class="[{act:isBaoHan(ite.id,item.companyids)}]">
															<div class="xzh"></div>
														</div>
														<div class="comicName" @click.stop="item.isRun ? '' : sendCompany(ite,item,$event)" >	
															<span class="comicNameS" :class="[{Act:isBaoHan(ite.id,item.companyids)}]" >
																{{ ite.title }}
															</span>
														</div>
														<div class="dialog1" :style="{left:dialogS.style.left +'px',top:dialogS.style.top+'px'}" v-if="dialogS.visble&&dialogS.item.id == item.id ">
															<span  class="title1 show1">你好，<br> 是否需要新建对话了解该公司介绍？</span>
															<div class="btnpage1">
																<span  class="cancel1 flexC1" @click.stop="dialCancel" >取消</span>
																<span  class="define1 flexC1" @click.stop="dialSubmit">确定</span>
															</div>
														</div>
													</div>
												</div>
												<!-- 智能询价备注 -->
												<div class="znxjTex" v-if=" item.companyids.length > 0" >
													 <el-input
														class="znxjTexInput"
														v-model="item.remark"
													    :rows="4"
													    type="textarea"
													    placeholder="请输入报价备注"
														resize="none"
														maxlength="200"
														:show-word-limit="true"
													  />
												</div>
											</template>	
											
											
											<!-- 智能询价发送报告 -->
											<template v-if="item.isType == 3 && item.companylist && item?.companylist.length > 0">
												<div >
													<span :class="[{ active: item.isShowLink }, 'btnlink']"
														@click="openLink(k, item.id)" v-if="!item.isBeCreate">
														已向{{ item?.companylist.length }}企业推送详细报价索取申请：
													</span>
													<span class="btnlink" v-else>
														{{ createCon }}
														<p v-html="createItem"></p>
													</span>
													<div class="linkbox" v-if="item.isShowLink">
														<span class="show" @click.stop="item.isRun ? '' : sendCompany(link,item,$event)" v-for="(link, k) in item.companylist"
															:key="k">推送第{{ k + 1 }}家相关企业：
															<a target="_blank">{{ link.title }}</a></span>
														<div class="dialog1"  :style="{left:dialogS.style.left +'px',top:dialogS.style.top+'px'}" v-if="dialogS.visble&&dialogS.item.id == item.id">
															<span  class="title1 show1">你好，<br> 是否需要新建对话了解该公司介绍？</span>
															<div class="btnpage1">
																<span  class="cancel1 flexC1" @click.stop="dialCancel" >取消</span>
																<span  class="define1 flexC1" @click.stop="dialSubmit">确定</span>
															</div>
														</div>
													</div>
												</div>
												<div class="znxjCon" v-if="item.remark">
													<div class="znxjCo">
														备注信息:{{item.remark}}
													</div>
												</div>
											</template>

											<div class="chatView" style="colo:#666" v-html="getMarked(item?.content)">
											</div>
								
											<div v-if="item.isType == 2 && !item.isRun && item.companylist.length > 0">
												<el-button type="primary" 
													v-if="item.issend == 3"
													disabled>
													已发送报价</el-button>
												<el-button type="primary" 
													v-else
													:disabled="item.companyids.length <= 0"
													@click="sendSumbitDetail(item,k)">
													确认并发送详细报价</el-button>
											</div>
										</div>
										<img v-if="!item.isRun" :src="`${imgurl}subscript.png?v=001`"
											class="subscript" />
									</div>
									
								</div>
								
							</div>
						</template>
						<template v-else>
							<div :class="[{ user: !base.isMobile }, { system: base.isMobile }, 'userPic']"
								v-if="item.identity == 'user'">
								<img v-if="useStore?.avatar" :src="`${baseurl}${useStore?.avatar}`" />
								<img v-else :src="`${imgurl}pic.jpg`" />
							</div>
							<div :class="[{ active: item.isRun }, 'userPic system']" v-else>
								<img v-if="item.isRun && base.isMobile" class="run" :src="`${imgurl}systempic.gif`" />
								<video class="videoLoad" v-if="item.isRun && !base.isMobile" muted autoplay="autoplay"
									loop="loop" :src="`${imgurl}systempic.mp4`"></video>
								<img v-if="!item.isRun" :src="`${imgurl}systempic.png`" />
							</div>

							<div :class="[{ selected: isSelected }, 'quertitle']" @dblclick="copyContent(item.content)"
								v-if="item.identity == 'user'">
								{{ item.content }}
							</div>
							<div v-else>
								<div
									:class="[{ active: item.count > 1 && !item.isRun }, { multiple: item.count > 3 && !item.isRun }, 'answer']">
									<div class="answerBox">
										<div :class="[{ active: item.isRun },
		{ runing: isChat && item.isRun },
		{ long: item?.sessionArr && item?.sessionArr.length > 1 },
			'chatAnswer markdown-body']">
											<div v-if="item.relatelink && item?.relatelink.length > 0">
												<span :class="[{ active: item.isShowLink }, 'btnlink']"
													@click="openLink(k, item.id)" v-if="!item.isBeCreate">
													找到了{{ item?.relatelink.length }}篇资料作为参考：
												</span>
												<span class="btnlink" v-else>
													{{ createCon }}
													<p v-html="createItem"></p>
												</span>
												<div class="linkbox" v-if="item.isShowLink">
													<span class="show" v-for="(link, k) in item.relatelink"
														:key="k">找到第{{ k + 1 }}篇案例资料：<a :href="link.url"
															target="_blank">{{ link.title }}</a></span>
												</div>
											</div>

											<div class="videoBtn" v-if="item.isRunning || item.isVoice">
												<!-- v-if="item?.nowtaskId && !item?.isRun" -->
												<div class="audioBtn" @click="playAudio(k, item.id)">
													<div
														:class="[{ pause: item?.isPlay }, { disable: item?.isLoadPlay }, 'btnplay']">
													</div>

													<div class="wave" v-if="!item?.isPlay"></div>
													<div class="voice-line-wrap" v-else :style="{
			'--line-height': '15px',
			'--line-start-color': '#999999',
			'--line-end-color': '#999999',
		}">
														<div class="voice-line one"></div>
														<div class="voice-line two"></div>
														<div class="voice-line three"></div>
														<div class="voice-line four"></div>
														<div class="voice-line five"></div>
														<div class="voice-line six"></div>
														<div class="voice-line seven"></div>
														<div class="voice-line six"></div>
														<div class="voice-line five"></div>
														<div class="voice-line four"></div>
														<div class="voice-line three"></div>
														<div class="voice-line two"></div>
														<div class="voice-line one"></div>
													</div>
												</div>

											</div>

											<div class="chatView" style="colo:#666" v-html="getMarked(item?.content)">
											</div>

											<span class="source" v-if="item?.source && !item.isRun" @click="putQues(item.source)">回答来源于：{{ item.source }}</span>

											<!-- v-if="(item.sessionArr && item?.sessionArr.length > 1 || item?.task_id) && !item.isRun" -->
										</div>
										
										<img v-if="!item.isRun" :src="`${imgurl}subscript.png?v=001`"
											class="subscript" />

									</div>

									<div :class="base.isMobile ? 'btnpage mobile' : 'btnpage pc'"
										v-if="item.sessionArr && item?.sessionArr.length > 1 && !item.isRun">
										<div class='button-prev' @click.stop="changeSession(0, k, item.id)">
											<img v-if="base.isMobile" :src="`${imgurl}left01.png`" alt="">
											<img v-else :src="`${imgurl}left.png`" alt="">
										</div>
										<span class="count">{{ item.key }}/{{ item.count }}</span>
										<div class='button-next' @click.stop="changeSession(1, k, item.id)">
											<img v-if="base.isMobile" :src="`${imgurl}left01.png`" alt="">
											<img v-else :src="`${imgurl}left.png`" alt="">
										</div>
									</div>
									<div :class="[{ active: !item?.isRun }, 'eidtBox']">
										<div v-if="!item.source">
											<span :class="[{ disable: isTwo == true }, 'generate']"
												v-if="item?.isRun && isBeStop == false"
												@click="isTwo == false ? stopCreate() : ''">
												停止生成
											</span>
											<span class="generate beging" v-if="item?.isRun && isBeStop == true">
												正在停止生成
											</span>
											<span class="generate" v-if="k == (talkList.length - 1) && !item?.isRun"
												@click="getchatRebuild(k, item.id)">
												重新生成
											</span>
										</div>
										
										
										<span :class="[{ active: item?.isCopy }, 'copy']" v-if="!item?.isRun"
											@click="copyText(k, item.id)">
											{{ isCopy ? '复制成功' : '复制文本' }}
										</span>
										<div v-if="!item?.isRun"
											:class="[{ active: base.isShowFeedques && isReplayId == item.id }, { isEnd: k == (talkList.length - 1) }, 'like']"
											@click="getContFeed($event, k, item.id)">
											<video class="videoCon" v-if="k == (talkList.length - 1) && !base.isMobile"
												muted autoplay="autoplay" loop="loop" :src="`${imgurl}yes.mp4`">
											</video>
											<div class="dianzan flexC">
												<img v-if="k == (talkList.length - 1) && base.isMobile"
													:src="`${imgurl}dianzan.gif`" />
											</div>
											<i>内容反馈</i>
										</div>
									</div>
								</div>
								<!-- 推荐问题 -->
								<div class="newQues clearfix"
									v-if="item?.relatedList && item?.relatedList.length > 0 && !item.isRun">
									<span class="name show">您还可以继续问我：</span>
									<div class="newList">
										
										<span class="newItem" @click="putQues(qa)" v-for="(qa, i) in item.relatedList"
											:key="i">
											{{ qa }}
										</span>
										
									</div>
								</div>
								<!-- 搜索问题 -->
								<div class="none newQues clearfix" v-if="item?.searchList && item?.searchList.length > 0 && !item.isRun">
									<span class="name show company" >企业专业回答：</span>
									<div class="searchList">
										<span class="searchItem" @click="searchAnswerBy(qa)"
											v-for="(qa, i) in item.searchList" :key="i"
											>
											<a class="comp">{{ qa.brand }}</a>{{ qa.title }}
										</span>
										
										
									</div>
								</div>
							</div>
						</template>










					</div>
				</div>
			</div>
			<div class="askCon guide" v-if="base.guideIndex == 1">
				<div class="textBox" id="textBox">
					<span class="tie" v-if="base.guideIndex == 1"></span>
					<div class="textCon disable">
						请输入问题，可通过shift+回车换行
					</div>
					<span class="btnEnter show"></span>
				</div>
				<span class="mark" v-if="!base.isMobile">
					内容由AI生成,仅供参考,请遵守《WIRE AI协议》、《WIRE AI个人信息保护规则》版本:V1.1.1
				</span>
			</div>
			<div :class="[{ active: base.isShowLeft }, 'askCon']" v-if="base.guideIndex != 1">
				<div class="bg" v-if="base.isWord"></div>
				<div :class="[{ active: isTextInput }, 'textBox']" id="textBox">
					<span class="tie" v-if="base.guideIndex == 1"></span>
					<textarea v-if="!base.isWord" ref="textarea" @focus="textFocus()" @blur="textFocus()"
						@input="adjustTextareaHeight" class="textCon" v-model="questionCon" @keydown="handleKeyDown"
						placeholder="请输入问题，可通过shift+回车换行" disable>
					</textarea>
					<div v-else class="textCon disable">
						请输入问题，可通过shift+回车换行

					</div>

					<plugins :classData="menuClassList" @onSuccessPlugins="onSuccessPlugins" @onSendCalculator="onSendCalculator"></plugins>
					<span :class="[{ run: base.isEnterLoad }, 'btnEnter show']" @click="enterSession"></span>
					
				</div>
				<span class="mark" v-if="!base.isMobile">
					内容由AI生成,仅供参考,请遵守《WIRE AI协议》、《WIRE AI个人信息保护规则》版本:V1.1.1
				</span>
				<popcon 
					v-if="isShowSession"
					@cancelDelate="closeDialog" 
					@definelDelate="showDialog"
				>
				</popcon>
			</div>
		</div>
		<!-- 问题反馈 -->
		<feed-ques v-if="base.isShowFeedques"></feed-ques>
		<!-- 功能反馈 -->
		<feed-back v-if="base.isShowfeed"></feed-back>
		<!-- 新手引导 -->
		<guide v-if="base.isShowGuide && !base.isMobile" @getSessionCon="getSessionCon"></guide>
		<guide-wap v-if="base.isShowGuide && base.isMobile" @getSessionCon="getSessionCon"></guide-wap>
		<audio ref="audioElement" @ended="onAudioEnded"
			src="http://aipe-speech.bj.bcebos.com/text_to_speech/2024-03-28/660525f9ec25d20001df915c/speech/0.null?authorization=bce-auth-v1%2FALTAKjI91nE52nvtDNRgFlUCVz%2F2024-03-28T08%3A13%3A37Z%2F259200%2F%2F959ece34aa509148403fe6f28166cfa52b178a4ac760ebd47af63b6a8986fd3b"></audio>
		<!-- 消息中心-个人消息1 -->
		<message-personal v-if="base.isMessageType == 1"></message-personal>	
		<!-- 消息中心-企业消息 -->
		<message-enterprise v-if="base.isMessageType == 2"></message-enterprise>	

		

	</div>
</template>
<script setup lang='ts'>
import { useSystemStore } from "@/store/modules/system";
import { useUserStore } from "@/store/modules/user";
import popcon  from '../common/dialog.vue';
import feedBack from './feedBack.vue';
import feedQues from './feedQues.vue';
import guide from '../guide/guide.vue';
import guideWap from '../guide/guideWap.vue';
import newSession from './sessionNew.vue';
import sessionRecord from './sessionRecord.vue';
import plugins from './plugins.vue';
import messagePersonal from '../messageCenter/messagePersonal.vue';
import messageEnterprise from '../messageCenter/messageEnterprise.vue';
import aiCalculator from '../plugins/aiCalculator.vue';
import { marked } from 'marked'
import hljs from 'highlight.js' // 代码块高亮
import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
import MarkdownIt from 'markdown-it'
import markdownItHighlightjs from 'markdown-it-highlightjs';
import markdownItCodeCopy from 'markdown-it-code-copy';
import clipboard3 from 'vue-clipboard3'; //复制文本
import { decodeKey, excludeKey, defaultReply, questionList } from '../../utils/base.ts';
import {  ispdfRE } from '../../utils/timeFun.ts';

import { throttle } from "throttle-debounce"

import pdfapi from "@/api/pdf.ts"

const { toClipboard } = clipboard3();
const base = useSystemStore();
const useStore = useUserStore();
const api = inject('$base', null as any);
const $_ = inject('$_', null as any);
const imgurl = import.meta.env.VITE_APP_TITLE + '/assets/images/';
const baseurl = inject('$baseurl', null as any);
const talkList = ref<any>([]);
const isTextInput = ref<boolean>(false);
const questionCon = ref<string>();
const currentIndex = ref<number>(1);
const isShowPlug = ref<boolean>(true);
const isSessionCon = ref<boolean>(false);
const isPlug = ref<boolean>(false);
const isCurrent = ref<boolean>(false);
const isNoSecurity = ref<boolean>(false);
const isCopy = ref<boolean>(false);
const isReplayId = ref<number>();
const isRecom = ref<boolean>(false);
const isBurst = ref<boolean>(false);
const reginKey = ref<number>(false);
const beTalk = ref<boolean>(false);
const recomQuesList = ref<any>([]);  //推荐问题
const searchQuesList = ref<any>([]);  //搜索问题
const chatContent = ref(null);
const chatBox = ref(null);
const isScrolling = ref<boolean>(false);
const lastScrollHeight = ref<number>(0);
const isStop = ref<boolean>(false);  //停止生成
const isBeStop = ref<boolean>(false);  //正在停止生成
const chattoken = ref<any>();
const isShowLink = ref<boolean>(false);
const createCon = ref<any>();
const createItem = ref<any>();
const isSelected = ref(false);   //双击选中状态
const history = ref<any>();   //历史记录
const isTwo = ref<boolean>(false);   //历史记录
const processTimeout = ref<any>();
const currentId = ref<number>();
const audiosrc = ref<string>();
const audioElement = ref<HTMLAudioElement | null>(null);
const wsUrl = 'wss://www.wireai.com/wss';
const isEnding = ref<boolean>(false);
const isStoping = ref<boolean>(false);
const connectNum = ref<number>(0);
const lockReconnect = ref<boolean>(false); //soket 重连
const resetConnectTimeOut = ref<any>(null); //soket 重连定时器
const fetchList = ref<any>([]);
const isQA = ref<boolean>(false);  //是否是QA固定答复
const qAanswer = ref<boolean>(false);  //QA答案 
const isQAquestion = ref<boolean>(false); 	//是否是QA企业信息
const isShowSession = ref<boolean>(false); 	//是否创建新会话
watch(() => base.isNewSess, (newValue, oldValue) => {
	if (oldValue != newValue && newValue != 0) {
		audioElement.value.pause();
		talkList.value.forEach(item => {
			let list = item;
			list.forEach(item2 => {
				item2.isPlay = false;
				item2.isRun = false;
			})
		})
		isPlayAudio.value = false;
	}
	if (newValue == true) {
		talkList.value = [];
	}
	console.log(`count 的值从 ${oldValue} 变为 ${newValue}`);
});
/**
 * 展开推荐链接
 */
function openLink(index: number) {
	talkList.value[index].forEach(item => {
		if (item.identity == 'assistant') {
			item.isShowLink = !item.isShowLink;
		}
	})
}
function changeSession(type: number, k: number, id: number) {
	let list = talkList.value[k];
	list.forEach(item => {
		if (item.id == id) {
			if (type == 0) {
				item.key--;
				if (item.key == 0) {
					item.key = item.count;
				}
			} else {
				if (item.key == item.count) {
					item.key = 1;
				} else {
					item.key++;
				}
			}
			item.content = item.sessionArr[item.key - 1].content;
		}
	})
}
/**
 * mark down 处理样式
 */
function getMarked(content) {
	const md = new MarkdownIt({
		html: true
	});
	md.use(markdownItHighlightjs)
	md.use(markdownItCodeCopy)
	const html = md.render(content)
	return html;
};
/**
 * 编辑会话标题
 */
function createTitle(val) {
	questionCon.value = val;
	base.isEnterLoad = true;
	enterSession();
}
/**
 * 双击复制 问题
 */
function copyContent(content: string) {
	const textarea = document.createElement("textarea");
	textarea.value = content;
	document.body.appendChild(textarea);
	textarea.select();
	document.execCommand('copy');
	document.body.removeChild(textarea);
	isSelected.value = true;
	setTimeout(() => {
		isSelected.value = false;
	}, 1000);
	ElMessage({
		message: '内容已复制到剪贴板！',
		type: 'success',
	})
}
/**
 * 复制文本
 */
const copyText = async (k: number, id: number) => {
	let content;
	talkList.value.forEach((item, index) => {
		if (index == k) {
			item[1].isCopy = true;
			content = item[1].content;
		}
	})
	const parser = new DOMParser();
	const doc = parser.parseFromString(content, 'text/html');
	const plainTextContent = doc.body.textContent || '';
	try {
		await toClipboard(plainTextContent);
		ElMessage({
			message: '文本复制成功',
			type: 'success',
		})
		setTimeout(() => {
			talkList.value.forEach((item, index) => {
				item[1].isCopy = false;
			})
		}, 1500)
	} catch (error) {
		ElMessage({
			message: '复制失败',
			type: 'error',
		})
	}
}
function textFocus() {
	console.log(9999000)
	if (questionCon.value != '') {
		isTextInput.value = !isTextInput.value;
	}
}
/**
 * 内容反馈
 */
function getContFeed(event: event, index: number, id: number) {
	event.stopPropagation();
	base.isShowfeed = false;
	base.isShowFeedques = !base.isShowFeedques;
	isReplayId.value = id;
	talkList.value.forEach((item, k) => {
		if (k == index) {
			base.feedQueItem = {
				'ques': item[0],
				'answer': item[1]
			}
		}
	})
}
/**
 * 推荐问题入口提问
 */
function putQues(content: string) {
	questionCon.value = content;
	setTimeout(() => {
    if (chatBox.value) {
      chatBox.value.scrollTo({
        top: chatBox.value.scrollHeight,
        behavior: "smooth",
      });
    }
  }, 100);
	enterSession();
}
/**
 * 输入问题入口
 */
function enterSession() {
	if (questionCon.value) {
		let isShowPop = false;
		talkList.value.forEach(gropItem=>{
			gropItem.forEach(item=>{
				if(item.isType != 1){
					isShowPop = true;
				}
			})
		})
		console.log(isShowPop)
		console.log(base.sessionType)

		if(base.sessionType == 2 || isShowPop == true){
			isShowSession.value = true;
			return;
		}

		base.isRegin = false;
		createSession();
	}
}
/**
 * 关闭新对话提示
 */
function closeDialog(){
	isShowSession.value = false;
}
/**
 * 开启计算器是 创建新对话
 */
function showDialog(){
	isShowSession.value = false;
	base.sessionType = 0;
	base.isRegin = false;
	talkList.value = [];
	base.inSessionId = 0;
	createSession();
}
/**
 * 停止生成
 */
function stopCreate() {
	if (isStop.value == true && isBeStop.value == true) {
		return;
	}
	isBeStop.value = true;
	isStop.value = true;
	isChat.value = false;
	clearInterval(intervalSoket.value);
}
/**
 * 新建会话 第一步 获取token
 * @parm sessionid 0 
 */
function createSession() {
	fetchList.value = [];
	isEnding.value = false;
	fetchList.value = [];
	isEnding.value = false;
	isStoping.value = false;
	isTypingStarted.value = false;
	isConnect.value = false;
	isSend.value = false;
	isTwo.value = true;
	isQA.value = false;
	base.isWord = true;
	isStop.value = false;
	base.isNewSess = false;
	// audioElement.value.pause();
	isPlayAudio.value = false;
	let id = base.inSessionId ? base.inSessionId : 0;
	let content = base.isRegin ? talkList.value[reginKey.value][0].content : questionCon.value;
	let len;
	currentId.value = id;
	if (base.isRegin == true) {
		len = reginKey.value
	} else {
		len = talkList.value.length > 0 ? talkList.value.length - 1 : 0;
	}
	if (!content) {
		return;
	}

	talkList.value.forEach(GropItem => {
		GropItem = GropItem || [];
		GropItem.forEach(item => {
			item.isPlay = false;
			item.isRun = false;
			if (item.identity == 'assistant') {
				item.relatedList = [];
				item.searchList = [];
			}
		})
	})
	let data = {
		userid: useStore.userIds,
		sessionid: id,
		content: content,
	}
	api.chatone(data).then(res => {
		if (base.inSessionId == 0 || (base.isRegin == false && base.isNewSess == true)) {
			isCurrent.value = true;
			getSessionlist();
		}
		base.inSessionId = res.data.sessionid;
		currentId.value = res.data.sessionid;
		history.value = res.data.history;
		history.value.forEach(item => {
			if (item.role == 'assistant') {
				item.content = decodeKey(item.content);
			}
		})
		chattoken.value = res.data.token;
		if (base.isNewSess == false && base.isRegin == false) {
			temporary(base.inSessionId);
		}
		if(isQAquestion.value){
			typewriter(qAanswer.value.title,qAanswer.value.content);
			twoAfter();
		}else{
			getSearchAnswer(1,content);
		}
	})
}
/**
 * @parm 查询是否有企业信息
 */
function getSearchAnswer(type:number,question:string){
	if(type == 1){
		isQA.value = true;
	}
	let data = {
		sk: question,
		type: type,
	}
	const regex = /你是[\u4e00-\u9fa5]+吗/;
	const isMatch = regex.test(question);
	if(isMatch){
		data.type = 3;
	}
	let len = (base.isRegin == true) ? reginKey.value : talkList.value.length - 1;
	talkList.value[len][1].searchList = [];
	api.searchAnswer(data).then(res => {
		console.log(res,'777777')
		if(type != 2){
			if(res.data){
				typewriter(question,res.data.content);
			}else{
				getchattwo();
				fetchData();
			}
		}else{
			let list = res.data;
			list.forEach(item => {
				talkList.value[len][1].searchList.push(item)
			})
			searchQuesList.value = list;
		}
		
	})
}
/**
 * 企业 搜索答案
 */
function searchAnswerBy(row:any){
	qAanswer.value = row;
	isQAquestion.value = true;
	questionCon.value = row.title;
	base.isEnterLoad = true;
	enterSession();
}
/**
 * 打字机效果
 */
function typewriter(question: string, answer?: string) {
	let len;
	if (base.isRegin == true) {
		len = reginKey.value
	} else {
		len = talkList.value.length > 0 ? talkList.value.length - 1 : 0;
	}
	questionCon.value = '';
	isChat.value = true;
	isQA.value = true;
	let content = answer;
	base.newTalk.answer = answer;
	let index = 0;
	const intervalId = setInterval(() => {
		talkList.value[len][1].content += content[index];
		index++;
		if (index === content.length) {
			clearInterval(intervalId);
			base.newTalk.completion_tokens = 0;
			base.newTalk.total_tokens = 0;
			base.newTalk.prompt_tokens = 0;
			base.newTalk.question = question;
			base.newTalk.relatelink = [];
			base.newTalk.searchList = [];
			if (base.isRegin) {
				getRebuildchat();
			} else {
				chatthree();
			}
		}
	}, 30); // 每个字符的间隔时间（毫秒）
}
/**
 * 新建会话 第二步 建立会话 获取相关链接  同时请求两个接口
 */
const isChat = ref<boolean>(false);
const isBeDoing = ref<boolean>(false);
const contentBase = ref<string>();
const currentData = ref<any>();
const incompleteData = ref<string>('');
const isConnect = ref<boolean>(false);
const isTypingStarted = ref<boolean>(false);
const intervalSoket = ref<any>(null);
const isSend = ref<boolean>(false);
const isChatEnd = ref<boolean>(false);
const creatSoket = () => {
	console.log('wireai soket')
	const webSocket = new WebSocket(`wss://www.wireai.com/wss`);
	webSocket.onopen = (res) => {
		console.log('WebSocket连接已打开！');
		if (!isConnect.value && !isBeStop.value) {
			sendSoket(webSocket);
		}
		if (isBeStop.value == true) {
			console.log('这个时候就关闭了');
			webSocket.send(JSON.stringify({ type: 'close' }));
			webSocket.close(1000, 'Normal closure');
			stopProcessing();
			return;
		}
		isConnect.value = true;
		/***
		**最后一条需要主动关闭soket
		* @@param  根据返回包含字段 ‘error_code’ 提示请求失败
		***/
		webSocket.onmessage = (res) => {
			console.log('收到服务器内容：' + res.data);
			let dataString = res.data;
			isSend.value = true;
			if (isEnding.value == true) {
				webSocket.send(JSON.stringify({ type: 'close' }));
				webSocket.close(1000, 'Normal closure');
				isConnect.value = false;
				return;
			}
			if (dataString.includes("error_code")) {
				reset({
					answer: 'AI智能助手繁忙，稍后再试吧！',
					completion_tokens: 0,
					total_tokens: 0,
					prompt_tokens: 0,
				})
				webSocket.send(JSON.stringify({ type: 'close' }));
				webSocket.close(1000, 'Normal closure');
				isConnect.value = false;
				return;
			}
			if (isBeStop.value == true) {
				webSocket.send(JSON.stringify({ type: 'close' }));
				webSocket.close(1000, 'Normal closure');
				isConnect.value = false;
				stopProcessing();
				return;
			}
			if (!res.data.startsWith("data")) {
				dataString = incompleteData.value + res.data;
			}
			incompleteData.value = '';
			const regex = /{.*}/;
			const match = dataString.match(regex);
			console.log('match:::', match);
			if (match) {
				const jsonDataString = match[0];
				console.log('处理过的data:', jsonDataString)
				const data = JSON.parse(jsonDataString);
				incompleteData.value = dataString.slice(match.index + match[0].length);
				console.log(incompleteData.value == '' && data.is_end == true)
				if ((incompleteData.value == '' && data.is_end == true) || isBeStop.value) {
					console.log('是否关闭');
					webSocket.send(JSON.stringify({ type: 'close' }));
					webSocket.close(1000, 'Normal closure');
					isConnect.value = false;
					clearInterval(intervalSoket.value)
					if (isBeStop.value) {
						stopProcessing();
					}
				}
				fetchList.value.push(data);
				if (fetchList.value.length > 0 && !isTypingStarted.value && !isBeStop.value && data.result) {
					startTypingEffect();
				}
				if (data.is_end == true) {
					stopProcessing();
					webSocket.send(JSON.stringify({ type: 'close' }));
					webSocket.close(1000, 'Normal closure');
					isConnect.value = false;
				}
			} else {
				incompleteData.value = dataString;
			}
		};
	};

	webSocket.onerror = (res) => {
		console.log('WebSocket连接打开失败，请检查！');
	};
	webSocket.onclose = (res) => {
		console.log('WebSocket自动关闭了，请检查！', isStoping.value);
		isConnect.value = false;
		if (isSend.value == false && connectNum.value < 3) {
			resetConnect();
		}
	};
}
/***
**处理停止生成后的操作
***/
function stopProcessing() {
	if (isStoping.value) {
		return;
	}
	isStoping.value = true;
	if (isBeStop.value) {
		clearInterval(intervalSoket.value);
	}
	let list = fetchList.value;
	if (fetchList.value.length > 0) {
		let key = fetchList.value.length - 1;
		let database = '';
		fetchList.value.forEach(item => {
			database += item.result;
		})
		let len = (base.isRegin === true) ? reginKey.value : talkList.value.length - 1;
		let basecontent = (isBeStop.value == true) ? talkList.value[len][1].content : database;
		reset({
			answer: basecontent,
			completion_tokens: fetchList.value[key].usage.completion_tokens,
			total_tokens: fetchList.value[key].usage.total_tokens,
			prompt_tokens: fetchList.value[key].usage.prompt_tokens,
		})
	} else {
		reset({
			answer: '已停止生成',
			completion_tokens: 0,
			total_tokens: 0,
			prompt_tokens: 0,
		})
	}
	console.log(fetchList.value, '目前得数据')
}
function reset(obj?: any) {
	console.log('进来了吗@@@@@@@@@@@@')
	isBeDoing.value = true;
	let len = (base.isRegin == true) ? reginKey.value : talkList.value.length - 1;
	isRecom.value = false;
	base.isEnterLoad = false;
	base.isWord = false;
	base.talkpage = 1;
	isChat.value = false;
	
	if(isStop.value == true){
		if(contentBase.value == ''){
			contentBase.value = '已停止生成';
			talkList.value[len][1].content = '已停止生成';
		}
		base.newTalk.answer = contentBase.value.replace(/undefined/g, '');
		base.newTalk.completion_tokens = currentData.value ? currentData.value.usage.completion_tokens : 0;
		base.newTalk.total_tokens = currentData.value ? currentData.value.usage.total_tokens : 0;
		base.newTalk.prompt_tokens = currentData.value ? currentData.value.usage.prompt_tokens : 0;
		console.log(base.isCurrenDel,'9999999999')
		if(base.isCurrenDel == false){
			if(base.isRegin){
				getRebuildchat();
			}else{
				chatthree();
			}
		}
	}else{
		base.newTalk.answer = obj.answer;
		base.newTalk.completion_tokens = obj.completion_tokens;
		base.newTalk.total_tokens = obj.total_tokens;
		base.newTalk.prompt_tokens = obj.prompt_tokens;
		if(base.isCurrenDel == false){
			if(base.isRegin){
				getRebuildchat();
			}else{
				chatthree();
			}
		}
	}
}
/***
**定义开始打字机效果的函数
***/
function startTypingEffect() {
	isChat.value = true;
	base.isWord = true;
	if (isTypingStarted.value) {
		return;
	}
	isTypingStarted.value = true;
	let currentIndex = 0;
	function showNext() {
		if (isBeStop.value) {
			clearInterval(intervalSoket.value);
			return;
		}
		if (currentIndex <= fetchList.value.length - 1) {
			const jsonData = fetchList.value[currentIndex];
			const resultValue = jsonData.result;
			let len = (base.isRegin === true) ? reginKey.value : talkList.value.length - 1;
			if (!jsonData.typingStarted && resultValue) {
				jsonData.typingStarted = true;
				let index = 0;
				intervalSoket.value = setInterval(() => {
					if (isBeStop.value) {
						clearInterval(intervalSoket.value);
					}
					talkList.value[len][1].content += resultValue[index];
					index++;
					if (index === resultValue.length) {
						clearInterval(intervalSoket.value);
						if (!isBeStop.value) {
							currentIndex++;
							showNext();
						}
					}
				}, 30);
			} else {
				if (!isBeStop.value) {
					currentIndex++;
					showNext();
				}
			}
		} else {
			isTypingStarted.value = false;
		}
		console.log('当前:', currentIndex, '总数', fetchList.value.length)
	}
	showNext();
}
/**
 * soket 心跳机制
 */
const resetConnect = () => {
	if (lockReconnect.value && connectNum.value < 3) {
		return;
	}
	connectNum.value = connectNum.value + 1;
	console.log('这个时候就关闭了', isStoping.value, isBeStop.value);
	if (isBeStop.value || isStoping.value) {
		console.log('这个时候就关闭了');
		stopProcessing();
		clearTimeout(resetConnectTimeOut.value);
		return;
	} else {
		lockReconnect.value = true;
		resetConnectTimeOut.value = setTimeout(() => {
			creatSoket();
			lockReconnect.value = false;
		}, 3000);
	}

}
/**
 * soket 发送消息
 */
const sendSoket = (webSocket) => {
	let jsondata = {
		type: 'chat',
		token: chattoken.value,
		history: history.value,
		query: base.newTalk.question
	}
	if (webSocket.readyState === WebSocket.OPEN) {
		webSocket.send(JSON.stringify(jsondata));
	}
}

const fetchData = () => {
		contentBase.value = '';
		const data = {
			query: base.newTalk.question,
			response_mode: 'streaming',
			conversation_id : '',
		};
		const apiUrl = 'https://appbuilder.baidu.com/rpc/2.0/cloud_hub/v1/ai_engine/agi_platform/v1/instance/integrated';
		fetch(apiUrl, {
			method: 'post' ,
			headers: {
				'Content-Type': 'application/json',
				'X-Appbuilder-Authorization' : 'Bearer '+'bce-v3/ALTAK-DjylEx7RKfBOLGdRpsx6x/ae088bb58930ab2f6890226c21235dcac1657b18'
			},
			body: JSON.stringify(data)
		}).then(response => {
			if (!response.ok) {
				throw new Error('Network response was not ok');
			}
			console.log(response,'responseresponse')
			let len = (base.isRegin == true) ? reginKey.value : talkList.value.length-1;
			questionCon.value = '';
			const reader = response.body.getReader();
			const decoder = new TextDecoder('utf-8');
			let buffer = '';
			let streamStr = '';
			let isBegin =false;
			const debounced = useDebounce(async (str) => {
				await streamData(str);
			}, 500);
			async function processStreamResult(result) {
				console.log(result,'result')
				const chunk = decoder.decode(result.value, { stream: !result.done });
				buffer += chunk;
				const lines = buffer.split('\n');
				buffer = lines.pop();
				// for (const line of lines) {
				// 	await handleLine(line); // 处理单条数据
				// }
				const hasErrorCode = lines.some((item) => {
					if (item.includes("error_code")) {
						console.log(item)
						const dataObj = JSON.parse(item.replace("data: ", ""));
						return dataObj.error_code !== undefined;
					}
					return false;
				});
				async function procrddLines(){
					if(hasErrorCode){
						reset({
							answer : 'AI智能助手繁忙，稍后再试吧！',
							completion_tokens : 0,
							total_tokens : 0,
							prompt_tokens : 0,
						})
					}else{
						console.log(isStop.value,'是否停止了啊',isBeDoing.value)
						if(isStop.value == false && isBeDoing.value == false){
							for(const line of lines){
								await handleLine(line);
							}
						}else{
							if(isBeDoing.value == false){
								isBeDoing.value == true;
								reset();
							}
						}
						
					}
				}
				procrddLines();
				if (!result.done && !isBegin) {
					if(isStop.value == false && isBeDoing.value == false){
						console.log('重新请求','77777777777777')
						await reader.read().then(processStreamResult)
					}else{
						console.log('重新请求222222222','77777777777777')
						if(isBeDoing.value == false){
							isBeDoing.value == true;
							reset();
						}
					}
				}
			}
			async function handleLine(line){
				isBeDoing.value = false;
				isBeStop.value = false;
				if (line.trim().length > 0) {
					const jsonData = line.substring(line.indexOf('{'));
					const eventData = JSON.parse(jsonData);
					if(eventData.result){
						console.log(eventData,'eventData')
						currentData.value = eventData;
						streamStr = eventData.result;
						contentBase.value += streamStr;
						if(isStop.value == false){
							await streamData(streamStr);
						}
						if(base.isRegin == false){
							isScrolling.value = false;
						}
					}
					if(eventData.is_end == true || isStop.value == true){
						if(isBeDoing.value == false){
							console.log('走到这了吗')
							isBeDoing.value = true;
							reset({
								answer : contentBase.value.replace(/undefined/g, ''),
								completion_tokens : eventData.usage.completion_tokens,
								total_tokens : eventData.usage.total_tokens,
								prompt_tokens : eventData.usage.prompt_tokens,
							})
						}
					}
				}
			}
			async function streamData(stream: string) {
				let index = 0;
				isBegin = true;
				isChat.value = true;
				isChatEnd.value = false;
				if(!stream || stream.length == 0){
					return;
				}
				async function processChar(){
					console.log(stream,'============================');
					const char = stream.charAt(index);
					if(isSessionCon.value == false){
						talkList.value[len][1].content += char;
						index++;
					}	
					if(index < stream.length && isStop.value == false){
						await new Promise((resolve)=>{
							processTimeout.value = setTimeout(resolve,30)
						})
						await processChar();
					}else{
						isBegin = false;
						isChatEnd.value = true;
						if(isStop.value == false){
							clearTimeout(processTimeout.value);
							setTimeout(async ()=>{
								await reader.read().then(processStreamResult);
							},100)
						}else{
							reset();
						}
					}
				}
				if(isStop.value == false){
					await processChar();
				}
			}
			if(isStop.value == false){
				reader.read().then(processStreamResult);
			}else{
				if(contentBase.value == ''){
					reset()
				}
			}
		}).then(data => {
			console.log(data,'1111111111');
		}).catch(error => {
			console.error('Error fetching data:', error);
		});
}

function getChatfour() {
	let len = (base.isRegin == true) ? reginKey.value : talkList.value.length - 1;
	recomQuesList.value = [];
	talkList.value[len][1].relatedList = [];
	let data = {
		content: base.newTalk.question
	}
	api.chatfour(data).then(res => {
		let list = res.data.result;
		list.forEach(item => {
			talkList.value[len][1].relatedList.push(item)
		})
		recomQuesList.value = list;
		isScrolling.value = false;
		scrollToBottom();
		
	})
}
function getchattwo() {
	isRecom.value = false;
	let content = base.isRegin ? talkList.value[reginKey.value][0].content : questionCon.value;
	base.newTalk.question = content;
	let len;
	if (base.isRegin == true) {
		len = reginKey.value;
	} else {
		if (talkList.value.length > 0) {
			len = talkList.value.length - 1;
		} else {
			len = 0;
		}
	}
	let data = {
		content: base.newTalk.question
	}
	isTwo.value = true;
	let isConplete = false;
	try {
		api.chattwo(data).then(res => {
			isConplete = true;
			let list = res.data.slice(0, 5);
			questionCon.value = '';
			base.newTalk.relatelink = res.data.slice(0, 5);
			console.log(len);
			talkList.value[len][1].relatelink = res.data.slice(0, 5);
			if (list.length > 0) {
				talkList.value[len][1].isBeCreate = true;
				createCon.value = '正在尝试为您在互联网搜索相关资料...';
				setTimeout(() => {
					createCon.value = '正在获取资料...';
					isTwo.value = false;
					let index = 0;
					function showNextItem() {
						if (index < list.length) {
							createCon.value = '';
							createItem.value = `找到第${index + 1}篇案例资料：<a target="_blank" href="${list[index].url}">${list[index].title}</a>`;
							index++;
							if (isStop.value == true) {
								talkList.value[len][1].isBeCreate = false;
								base.newTalk.relatelink = [];
								talkList.value[len][1].relatelink = [];
								twoAfter();
							} else {
								setTimeout(showNextItem, 800);
							}
						} else {
							createItem.value = `一共找到了${list.length}篇资料，正在阅读...`;
							setTimeout(() => {
								talkList.value[len][1].isBeCreate = false;
							}, 800);
							if (isStop.value == true) {
								base.newTalk.relatelink = [];
								talkList.value[len][1].relatelink = [];
								twoAfter();
							}
						}
					}
					if (isStop.value == false) {
						showNextItem();
						// base.newTalk.relatelink = [];
						// talkList.value[len][1].relatelink = [];
						// talkList.value[len][1].isBeCreate = false;
					}
				}, 1000);
				setTimeout(() => {
					twoAfter();
				}, 1000)
			} else {
				isTwo.value = false;
				twoAfter();
			}

		}).error(res => {
			console.log('2222接口请求失败', res);
		})
	} catch (error) {

	}
	// setTimeout(()=>{
	// 	if(isConplete == false){
	// 		isTwo.value = false;
	// 		twoAfter();
	// 	}
	// },15000)
}
/**
 * 新建会话 第二部完成后的操作
 */
function twoAfter() {
	if (base.isCurrenDel == false && isStop.value == false) {
		isSessionCon.value = false;
		if(isQAquestion.value == false){
			getChatfour();
		}
		getSearchAnswer(2,base.newTalk.question);
	}
	if (isStop.value == true) {
		base.newTalk.answer = '已停止生成';
		base.newTalk.completion_tokens = 0;
		base.newTalk.total_tokens = 0;
		base.newTalk.prompt_tokens = 0;
		base.newTalk.relatelink = [];
		base.isEnterLoad = false;
		base.isWord = false;
		if (base.isRegin) {
			getRebuildchat();
		} else {
			console.log('停止33333333');
			chatthree();
		}
	}
}
/**
 * 新建会话 第三步 入库
 */
const isJoing = ref<boolean>(false);
function chatthree() {
	console.log('进来了',base.newTalk.relatelink)
	if (isJoing.value == true) {
		return;
	}
	let detail = base.newTalk.answer ? encodeURIComponent(base.newTalk.answer) : '已停止生成';
	let data = {
		question: base.newTalk.question,
		userid: useStore.userIds,
		sessionid: base.inSessionId,
		answer: detail,
		completion_tokens: base.newTalk.completion_tokens,
		total_tokens: base.newTalk.total_tokens,
		prompt_tokens: base.newTalk.prompt_tokens,
		relatelink: JSON.stringify(base.newTalk.relatelink),
		source:qAanswer.value.company,
	}
	api.chatthree(data).then(res => {
		let len = (base.isRegin == true) ? reginKey.value : talkList.value.length - 1;
		talkList.value[len][0].id = res.data.queid;
		talkList.value[len][1].id = res.data.answerid;
		beTalk.value = true;
		base.isRefresh = true;
		base.isEnterLoad = false;
		base.isWord = false;
		isBeDoing.value = false;
		isBeStop.value = false;
		isConnect.value = false;
		isEnding.value = true;
		talkList.value[len][1].nowId = res.data.answerid;
		
		// playAutio(detail,res.data.answerid);
		if (isQA.value == false && isQAquestion.value == false) {
			getSessionCon();
		} 
		qAanswer.value = '';
		isQAquestion.value = false;
		setTimeout(() => {
			isJoing.value = false;
			stopRuning();
		}, 1500)
	})
}
const stopRuning = () => {
	talkList.value.forEach(GropItem => {
		if (GropItem) {
			GropItem.forEach(item => {
				item.isRun = false;
			})
		}
	})
}
/**
 * 重新生成
 */
const reginId = ref<boolean>();
function getchatRebuild(index: number, id: number) {
	base.isRegin = true;
	isStop.value = false;
	reginKey.value = index;
	reginId.value = id;
	contentBase.value = '';
	recomQuesList.value = [];
	talkList.value.forEach((item, k) => {
		if (k == index) {
			item[1].isRun = true;
			base.isEnterLoad = true;
			item[1].content = '';
			item[1].isBeCreate = false;
			item[1].relatelink = '';
			item[1].relatedList = [];
			item[1].searchList = [];
			item[1].isShowLink = false;
		}
	})
	createSession();
}
function getRebuildchat() {
	let data = {
		id: reginId.value,
		sessionid: base.inSessionId,
		userid: useStore.userIds,
		content: encodeURIComponent(base.newTalk.answer),
		completion_tokens: base.newTalk.completion_tokens,
		total_tokens: base.newTalk.total_tokens,
		prompt_tokens: base.newTalk.prompt_tokens,
		relatelink: JSON.stringify(base.newTalk.relatelink)
	}
	api.rebuildchat(data).then(res => {
		base.isRegin = false;
		talkList.value[reginKey.value][1].content = base.newTalk.answer;
		talkList.value[reginKey.value][1].sessionArr.push({
			content: base.newTalk.answer,
			type: 2,
			id: res.data.answerid,
		});
		talkList.value[reginKey.value][1].key = talkList.value[reginKey.value][1].sessionArr.length;
		talkList.value[reginKey.value][1].count = talkList.value[reginKey.value][1].sessionArr.length;
		talkList.value[reginKey.value][1].relatedList = recomQuesList.value;
		console.log(talkList.value)
		talkList.value[reginKey.value][1].isRun = false;
		base.isEnterLoad = false;
		base.isWord = false;
		isBeDoing.value = false;
		isBeStop.value = false;
		isEnding.value = true;
		talkList.value[reginKey.value][1].nowId = res.data;
		talkList.value[reginKey.value][1].nowtaskId = '';
		setTimeout(() => {
			talkList.value[reginKey.value][1].isRun = false;
			// getSessionCon();
		}, 500)
	})
}
function getMoreList() {
	base.listpage++;
	getSessionlist();
}
/**
 * 会话列表
 */
function getSessionlist() {
	let data = {
		userid: useStore.userIds,
		page: base.listpage,
		title: base.keyword
	};
	if (base.listpage == 1) {
		base.sessionlist = [];
	}
	api.newsessionlist(data).then((res) => {
		let list = res.data.sessionlist;
		base.listCount = res.data.count;
		base.sessionlist = [...base.sessionlist, ...list];
		base.listLoad = false;
		if (list.length < 50) {
			base.noMoreDataList = true;
		}
		if (list.length > 0) {
			base.isNone = false;
		} else {
			base.isNone = true;
		}
		if (isCurrent.value == true) {
			const hasIstop = base.sessionlist.some(item => item.istop === 1);
			const resultId = hasIstop ? base.sessionlist.find(item => item.istop === 0) : base.sessionlist[0];
			talkList.value = [];
			temporary(resultId.id);
			isCurrent.value = false;
		}

	});
}

function temporary() {
	base.isNewSess = false;
	let obj = [
		{
			identity: "user",
			content: questionCon.value,
			rebuild: [],
			isType : 1,
		},
		{
			identity: 'assistant',
			isRun: true,
			content: '',
			rebuild: [],
			question: '',
			relatelink: '',
			relatedList: [],
			key: 1,
			sessionArr: [],
			count: 0,
			isBeCreate: false,
			isType : 1
		}
	]
	if(isQAquestion.value == true){
		obj[1].source = qAanswer.value.company;
	}
	talkList.value.push(obj);
	base.isEnterLoad = true;
	setTimeout(() => {
		isScrolling.value = false;
		scrollToBottom();
	}, 200)

}
/**
 * 获取会话信息
 */
const isNoSession = ref<boolean>(false);
function getSessionCon() {
	clearTimeout(processTimeout.value);
	isSessionCon.value = true;
	isNoSession.value = false;
	if (!beTalk.value) {
		talkList.value.forEach(GropItem => {
			GropItem = GropItem || [];
			GropItem.forEach(item => {
				if (item.identity == 'assistant') {
					item.relatedList = [];
					item.searchList = [];

				}
			})
		})
	}
	if (base.isSwich == true) {
		talkList.value = [];
	}
	audioElement.value.pause();
	// talkList.value.forEach(item=>{
	// 	let list = item;
	// 	list.forEach(item2=>{
	// 		item2.isPlay = false;
	// 		item2.isRun = false;
	// 	})
	// })	
	let data = {
		userid: useStore.userIds,
		sessionid: base.inSessionId,
		page: base.talkpage,
	}
	api.chathistorytest(data).then((res) => {
		clearInterval(intervalSoket.value);
		isNoSecurity.value = false;
		let list = res.data;
		if (list.length == 0) {
			isNoSession.value = true;
		} else {
			isNoSession.value = false;
		}
		if (res.data.length < 3) {
			base.isNohistory = true;
			if (base.talkpage > 1) {
				base.noMoreDataTalk = true;
			}
		} else {
			base.isNohistory = false;
		}
		list.forEach((gropItem, index) => {
			gropItem.forEach((item)=>{
				if(item.identity == 'user'){
					let firstLi = item;
					// if (firstLi && firstLi.content === '声屏障产品的种类有哪些，围绕转型升级应用了哪些新技术？') {
					// 	secondLi.isVoice = true;
					// }
				}
				if(item.identity == 'assistant'){
					let secondLi = item;
					if(secondLi.jsoncontent){
						let jsondata = JSON.parse(secondLi.jsoncontent);
						secondLi.companylist = jsondata.companylist;
						secondLi.companyids = jsondata.companyids;
						secondLi.infoData = jsondata.infoData;
						secondLi.classid = jsondata.classid;
						secondLi.remark = jsondata.remark;
					}
					if (index === 0 && currentId.value === base.inSessionId) {
						secondLi.relatedList = recomQuesList.value;
						secondLi.searchList = searchQuesList.value;
					} else {
						secondLi.relatedList = [];
						secondLi.searchList = [];
					}
					if (secondLi.relatelink) {
						secondLi.relatelink = JSON.parse(secondLi.relatelink) || [];
					}
					let arr = [];
					let obj = {
						content: decodeKey(secondLi.content),
						id: secondLi.id,
						type: 1,
						oldcontent: decodeKey(secondLi.content),
					}
					arr.push(obj);
					if (secondLi.rebuild && secondLi.rebuild.length > 0) {
						secondLi.rebuild.forEach(item2 => {
							let obj = {
								content: decodeKey(item2.content),
								id: item2.id,
								type: 2,
								oldcontent: decodeKey(item2.content),
							}
							arr.push(obj);
						});
					}
					secondLi.sessionArr = arr;
					secondLi.isShowLink = true;
					secondLi.content = decodeKey(secondLi.sessionArr[0].content);
					secondLi.key = 1;
					secondLi.isBeCreate = false;
					secondLi.count = (secondLi.rebuild ? secondLi.rebuild.length : 0) + 1;
					if (isPlayAudio.value) {
						secondLi.isPlay = true;
					}
				}
				
			})
			

	
		})
		if (base.isRefresh == true) {
			talkList.value = [...list];
		} else {
			talkList.value = [...list, ...talkList.value];
		}
		base.talkLoad = false;
		base.isNewSess = false;
		base.isSwich = false;
		base.isRefresh = false;
		if (base.talkpage == 1 && base.isRegin == false) {
			setTimeout(() => {
				scrollToBottom()
			}, 200)
		} else {
			console.log(chatContent.value.scrollTop, ',', chatBox.value.offsetHeight, ',', lastScrollHeight.value);
			chatContent.value.scrollTop = chatBox.value.offsetHeight - lastScrollHeight.value;
			console.log(chatContent.value.scrollTop)
		}
	})
}
function scrollToBottom() {
	if (!isScrolling.value) {
		chatContent.value.scrollTop = chatContent.value.scrollHeight - chatContent.value.offsetHeight;
	}
}

function handleScroll() {
	const scrollContainer = chatContent.value;
	const scrollTop = scrollContainer.scrollTop
	const scrollHeight = scrollContainer.scrollHeight
	const offsetHeight = scrollContainer.offsetHeight;
	if (scrollTop + offsetHeight < scrollHeight) {
		isScrolling.value = true
	} else {
		isScrolling.value = false
	}
	if (chatBox.value) {
		lastScrollHeight.value = chatBox.value.offsetHeight;
	}
	// console.log(scrollTop)
	if (scrollTop == 0 && !base.isNohistory && base.isNewSess == false) {
		console.log('top', scrollTop, 'height', offsetHeight)
		if (base.isEnterLoad == true) {
			// setTimeout(()=>{
			// 	if(base.is)
			// 	base.talkpage ++;
			// 	base.talkLoad = true;
			// 	getSessionCon();
			// 	console.log('加载一下页')
			// },300)
		}
	}
}
const textarea = ref(null);
function adjustTextareaHeight(event) {
	const textarea = event.target;

	if (textarea.value.length > 1000) {
		textarea.value = textarea.value.slice(0, 1000);
	}
	if (base.isMobile || textarea.value) {
		textarea.style.height = 'auto'; // 先将高度设置为自动以确保能够正确计算滚动高度
		textarea.style.height = textarea.scrollHeight + 'px'; // 设置实际高度
	}
}
function handleKeyDown() {
	base.isRegin = false;

	if (base.isWord == true) {
		event.preventDefault();
	}
	if (event.key === 'Enter' && !event.shiftKey) {
		
		if (questionCon.value) {
			let isShowPop = false;
			talkList.value.forEach(gropItem=>{
				gropItem.forEach(item=>{
					if(item.isType != 1){
						isShowPop = true;
					}
				})
			})
			if(base.sessionType == 2 || isShowPop == true){
				isShowSession.value = true;
				return;
			}
			createSession();
		}
		event.preventDefault();
	} else if (event.key === 'Enter' && event.shiftKey) {

	}
}
//
const playAutio = (k: number, content: string, id: number) => {
	// autioSoket(content);
	let data = {
		id: id,
		content: content,
	}
	api.getvoicefile(data).then(res => {
		console.log(res)
		if (talkList.value[k][1].sessionArr.length > 0) {
			let arr = talkList.value[k][1].sessionArr;
			arr.forEach(item => {
				if (item.id == id) {
					item.task_id = res.data.task_id;
				}
			})
		}
		talkList.value[k][1].task_id = res.data.task_id;
		talkList.value[k][1].nowtaskId = res.data.task_id;
		if (res.data.task_status == 'Created') {

		}
	});
}
// var audioContext = uni.createInnerAudioContext();
const voicestatus = async (k: number, id: string) => {
	// if(talkList.value[k][1].audioplay == true){
	// 	talkList.value[k][1].audioplay = false;
	// 	audioContext.pause();
	// 	return;
	// }
	let data = {
		task_id: '6604ec02417b20000193d400',
	}
	await api.getvoicestatus(data).then(res => {
		console.log(res)
		const autio = res.data.voice;

		audioContext.src = autio;
		talkList.value[k][1].audioplay = true;
		isPause.value = true;
		audioContext.play();
		audioContext.seek(0);
		audioContext.onEnded(function () {
			console.log('音频播放结束');
			talkList.value[k][1].audioplay = false;
		});
		// 监听音频播放错误事件
		audioContext.onError(function (err) {
			console.error('音频播放错误：', err);
			talkList.value[k][1].audioplay = false;
		});
		if (res.code == 201) {
			console.log('生成中');
			uni.showToast({
				title: '音频生成中，请稍后',
				icon: 'none'
			})
		}
	});
}
const isPlayAudio = ref<boolean>(false);

const playAudio = (k, id) => {
	let src = 'http://aipe-speech.bj.bcebos.com/text_to_speech/2024-03-27/6603d826851b3b0001a03cce/speech/0.null?authorization=bce-auth-v1%2FALTAKjI91nE52nvtDNRgFlUCVz%2F2024-03-27T08%3A26%3A32Z%2F259200%2F%2Fec3bacb32669a768d48df49beda3730eac530e9283204c36ecf3d4d3d661b106';
	if (talkList.value[k][1].isPlay) {
		console.log('111', audioElement.value)
		audioElement.value.pause();
		isPlayAudio.value = false;
		talkList.value[k][1].isPlay = false;
		return;
	}
	if (audioElement.value) {
		if (talkList.value[k][1].isRun) {
			talkList.value[k][1].isLoadPlay = true;

			setTimeout(() => {
				base.isplayaudio = true;
				talkList.value[k][1].isLoadPlay = false;
				audioElement.value.currentTime = 0;
				audioElement.value.play();
				isPlayAudio.value = true;
				talkList.value[k][1].isPlay = true;
			}, 2000)
		} else {
			base.isplayaudio = true;
			talkList.value[k][1].isLoadPlay = false;
			audioElement.value.currentTime = 0;
			audioElement.value.play();
			talkList.value[k][1].isPlay = true;
			isPlayAudio.value = true;

		}

	}
}
const onAudioEnded = () => {
	console.log('监听结束')
	talkList.value.forEach((item, k) => {
		let list = item;
		list.forEach(item2 => {
			item2.isPlay = false;
			item2.isRun = false;

		})
	})
	isPlayAudio.value = false;
}
onBeforeUnmount(() => {
	console.log('销毁')
	audioElement.value.pause();
})



// 张--
const pdfMessagae = ref<any>()
const isType = ref<any>(); //什么类型的
function temporaryPdf(a, b) {
	base.isNewSess = false;
	let obj = [
		{
			identity: "user",
			content: "",
			...a
		},
		{
			identity: 'assistant',
			isRun: true,
			content: '',
			question: '',
			isBeCreate: false,
			isStatus: 0,//0上传图片中 1 已完毕开始解析
			...b
		}
	]
	if(a.isShow){
		obj = [
			{
				identity: 'assistant',
				isRun: true,
				content: '',
				question: '',
				isBeCreate: false,
				isStatus: 0,//0上传图片中 1 已完毕开始解析
				...b
			}
		]
	}
	
	talkList.value.push(obj);
	base.isEnterLoad = true;
	setTimeout(() => {
		isScrolling.value = false;
		scrollToBottom();
	}, 200)
}

// 文档上传
const filesInfo = ref<any>({
	fileId:"",
	filepath:""
});
function onSuccessPlugins(el) {
	if(base.sessionType == 2 || base.inSessionId == 0){
		base.sessionType = 0;
		base.isNewSess = false;
	}
	console.log(el, '我是接受到的数据');
	// pdfMessagae.value = el.fileName
	// el.type 代表的是当前文件进度 0 1 上传文件  2--解读文档
	if (el.type == 0) {
		console.log('上传图片中')
		temporaryPdf({
						isType:2,
						content: el.fileName,
						infoData:el.data,
						classid:el.classid,
					}, 
					{
						isType:2,
						content:"",
						isStatus:0, //解析状态
						classid:el.classid,
						infoData:el.data,
						companylist:[],//公司列表
						companyids:[] ,//选中的公司列表
						remark:""
					});
	}
	else if (el.type == 1) {
		talkList.value[talkList.value.length - 1][1].isStatus = 1;
		talkList.value[talkList.value.length - 1][1].infoData = el.data;
		base.inSessionId = el.data.sessionid;
		sendBaoJiaSubmit(el.classid)
		getSessionlist();
	}
	// createSession();
}

/**
 * 打字机效果
 */
function typewriterPdf(question: string, answer: string, callback) {
	let len;
	if (base.isRegin == true) {
		len = reginKey.value
	} else {
		len = talkList.value.length > 0 ? talkList.value.length - 1 : 0;
	}
	isChat.value = true;
	let content = answer ? answer : defaultReply;
	let index = 0;
	const intervalId = setInterval(() => {
		talkList.value[len].forEach(item=>{
			if(item.identity == 'assistant'){
				item.content += content[index];

			}
		})
		index++;
		if (index === content.length) {
			console.log('打字机效果结束')
			clearInterval(intervalId);
			callback();
		}
	}, 30); // 每个字符的间隔时间（毫秒）
}
/**
 * 获取目录分类
 */
const menuClassList = ref<any>()
function getclasslist() {
	pdfapi.getclasslist({}).then((res) => {
		console.log(res)
		menuClassList.value = res.data
	})
}
const quotation = ref<any>();
// 发送报价单
function sendBaoJiaSubmit(classid:any) {
	pdfapi.getcompanylist({ classid: classid }).then((res) => {
		console.log(res)
		quotation.value = res.data;
		talkList.value[talkList.value.length - 1].forEach(item=>{
			if(item.identity == 'assistant'){
				item.id = res.data;
				item.companylist = res.data.companylist;
			}
		})
		historyRecord(2);
		// 开启自己效果
		typewriterPdf("", res.data.msg, function () {
			resetRun({isRun:false})
			base.isEnterLoad = false;
		})
	})
}
function resetRun(obj){

	talkList.value[talkList.value.length-1].forEach(item=>{
		if(item.identity == 'assistant'){
			item.isRun = false; 
			// = { ...item, ...obj };
			console.log('我停止了',item)
		}
	})

}

function historyRecord(type:number){
	let dataJson = {},content='';
	if(type == 2){
		dataJson = {
			companylist : quotation.value.companylist,
			companyids : [],
			infoData : talkList.value[talkList.value.length - 1][1].infoData,
			classid : talkList.value[talkList.value.length - 1][1].classid,
			issend : 0,
			remark:talkList.value[talkList.value.length - 1][1].remark || "",
		}
		content = quotation.value.msg;
	}else if(type == 3){
		dataJson = {
			companylist : quotation.value.companyinfo,
			issend : 2,
			remark:quotation.value.remark
		}
		content = quotation.value.msg2;
	}
	let data ={
		userid : useStore.userIds,
		sessionid : base.inSessionId,
		identity : 'assistant',
		content : content,
		isrequest : 0,
		issend : 0,   //发送报价状态0不需要1需要2已完毕
		jsoncontent :  JSON.stringify(dataJson),
		isType:type,
	}
	pdfapi.completehistoryrecord(data).then((res) => {
		console.log('保存成功');
		talkList.value[talkList.value.length - 1].forEach(item=>{
			if(item.identity == 'assistant'){
				item.id = res.data;
			}
		})
		console.log(talkList.value,'最新数据');
		// talkList.value[talkList.value.length - 1][1].id = res.data;
	})
}
/**
 * 提交确认报单
 */
function sendSumbitDetail(item,k:number){
	console.log(item);
	let data ={
		userid: useStore.userIds,
		companyids:item.companyids.join(','),
		classid:item.classid,
		filepath:item.infoData.filepath,
		filename:item.infoData.filename,
		remark:item.remark || ""
	}
	temporaryPdf(
		{
			isShow : true,
		},
		{
			isType:3,
			content:"",
			identity:'assistant',
			classid:item.classid,
			infoData:item.data,
			companylist:[],//公司列表
			isShowLink:true
		});
	console.log(talkList.value,'000000000');
	changeIssend(item.id,k);
	pdfapi.getoffer(data).then((res)=>{
		console.log(res)
		quotation.value = res.data;
		talkList.value[talkList.value.length - 1].forEach(item=>{
			if(item.identity == 'assistant'){
				item.issend = 2;
				item.companylist = res.data.companyinfo;
				item.remark = res.data.remark;
				
				historyRecord(3);
				typewriterPdf("", res.data.msg2, function () {
					item.isRun = false;
					base.isEnterLoad = false;
				})
			}
		})
		// talkList.value[talkList.value.length - 1][1].companylist = res.data.companyinfo;
		// 开启自己效果
		

	})
}
function changeIssend(id:number,k:number){
	let data = {
		id : id,
		issend : 3
	}
	pdfapi.updateisend(data).then(res=>{
		talkList.value[k].forEach(item=>{
			if(item.identity == 'assistant'){
				item.issend = 3;
			}
		})
	})
}
function isBaoHan(ite:any,list:any){
	return list.includes(ite)
}
// 多选
function selectMulter(ite:any,item:any){
	console.log(ite,item);
	const index= item.companyids.indexOf(ite.id);
	
	if (index !== -1) {  
        item.companyids.splice(index, 1);  
       
    } else {  
        // 如果ID不存在于数组中，则添加它  
        item.companyids.push(ite.id);  
    }  
	
}
const dialogS =ref<any>({
	visble:false,
	item:"",
	infoData:"",
	style:""
})

function sendCompany(item:any,itemCur:any,event:any){
	console.log(item,event)
	dialogS.value.visble = true
	dialogS.value.item = itemCur
	dialogS.value.infoData = item;
	dialogS.value.style = {
		top:event.layerY ,
		left:event.layerX
	}
}
function dialCancel(){
	dialogS.value.visble = false;
	dialogS.value.item = ""
	dialogS.value.infoData = "";
	dialogS.value.style = ""
}
function dialSubmit(){
	questionCon.value = dialogS.value.infoData.title;
	console.log('开启新的聊天',dialogS.value.infoData)

	isShowSession.value = false;
	talkList.value = [];
	base.inSessionId = 0;
	base.sessionType = 0;
	base.isRegin = false;
	createSession();

}




// ai计算器的回调方法
function onSendCalculator(){
	base.sessionType = 2;
	base.isNewSess = true;
}




onMounted(() => {

	// 张-
	getclasslist();

	// fetchpdf();
	// creatSoket
	if (audioElement.value) {
		audioElement.value.pause();
	}
	console.log(base.inSessionId)
	console.log(base.isNewSess)

	if (base.inSessionId == 0 && base.isNewSess) {
		getSessionlist();
	}
	if (chatContent.value) {
		chatContent.value.addEventListener('scroll', handleScroll);
	}
	const width = window.innerWidth;
	if (width < 768) {
		base.isMobile = true;
	}
	window.addEventListener('click', (e) => {

		dialCancel();
    });
	window.addEventListener('resize', function () {
		const width = window.innerWidth;
		if (width < 768) {
			base.isMobile = true;
		} else {
			base.isMobile = false;
		}
	});
})
</script>
<style lang="scss" scoped>
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.show {
	display: block;
}

.flexC {
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-scroll textarea {
	overflow: hidden;
	/* 禁用滚动条 */
	resize: none;
	/* 禁止用户手动调整文本框的尺寸 */
	height: auto !important;
	/* 强制将高度设置为自适应 */
	max-height: none !important;
	/* 禁用最大高度限制 */

}

.box {
	width: 100%;
	display: flex;
	height: 100vh;
	overflow: hidden;
	font-size: 14px;
}

.record {
	width: 280px;
	height: 100vh;
	background: url(../../assets/images/leftbg.png) no-repeat 60px -40px #f8f9fa;
	background-size: 403px 214px;
	padding: 20px 0;

	.logo {
		margin: 0 20px;

		img {
			width: 96px;
		}
	}

	.btnAdd {
		margin: 40px 15px 20px;
		color: #4955f5;
		width: 120px;
		height: 40px;
		cursor: pointer;
		background-image: linear-gradient(90deg, #99e3e0, #afcefe);
		position: relative;
		border-radius: 8px;

		&.disable {
			opacity: 0.6;
			cursor: default;
		}

		i {
			position: relative;
			z-index: 10;
			font-style: normal;
			background: linear-gradient(90deg, #0ac1ba, #2379ff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			font-size: 16px;
			transition: all .5s;
		}

		&:hover:not(.disable) {
			i {
				color: #fff;
				background: none;
				-webkit-text-fill-color: #fff;
			}
		}

		&::after {
			content: '';
			position: absolute;
			background: #fff;
			left: 2px;
			top: 2px;
			width: calc(100% - 4px);
			height: calc(100% - 4px);
			border-radius: 6px;
		}

		&:hover:not(.disable)::after {
			background-image: linear-gradient(90deg, #0ac1ba, #2379ff);
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	.serchBox {
		border-top: solid 2px #ecf0f4;
		border-bottom: solid 2px #ecf0f4;
		height: 50px;
		width: calc(100% - 20px);
		margin: 0 10px;
		background: url(../../assets/images/icon_search.png) no-repeat 25px center;
		background-size: 14px 14px;

		.text {
			width: 100%;
			background: none;
			height: 100%;
			padding: 0 25px 0 50px;
			outline: none;
			color: #666666;

			&::-webkit-input-placeholder {
				color: #b4bec9;
			}
		}
	}

	.deleteBox {
		width: 100%;
		height: 40px;
		padding: 0 20px;
		line-height: 40px;
		position: relative;

		&::before {
			position: absolute;
			top: 0;
			width: calc(100% - 20px);
			left: 10px;
			height: 2px;
			background: #ecf0f4;
			content: '';
		}

		.retract {
			background: url(../../assets/images/retract.png) no-repeat;
			background-size: 100%;
			width: 33px;
			height: 58px;
			position: absolute;
			right: -20px;
			top: 20px;
			transform: translateY(-50%);
			z-index: 99;
			cursor: pointer;
		}

		.close {
			float: right;
			background: url(../../assets/images/close02.png) no-repeat right center;
			background-size: 8px 8px;
			position: relative;
			padding-left: 20px;
			width: 10px;
			height: 100%;
			cursor: pointer;

			&::after {
				content: '';
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				width: 2px;
				height: 10px;
				background: #c9cad7;
				left: 0;
			}
		}

		.checkAll {
			color: #267bf7;
			position: relative;
			padding: 0 15px 0 18px;
			margin-right: 10px;
			display: block;
			float: left;
			cursor: pointer;

			&::before,
			&::after {
				content: '';
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
			}

			&::before {
				width: 10px;
				height: 10px;
				border: solid 1px #267bf7;
				border-radius: 50%;
				left: 0;
			}

			&.active::before {
				background: #267bf7;
			}

			&::after {
				width: 2px;
				height: 10px;
				background: #c9cad7;
				right: 2px;
			}
		}

		.delete {
			display: block;
			float: left;
			color: #9094b0;
			font-size: 12px;
			background: url(../../assets/images/delete.png) no-repeat left center;
			background-size: 12px 13px;
			padding-left: 20px;
			line-height: 40px;
			cursor: pointer;

			&.disable {
				cursor: default;
				opacity: 0.5;
			}

			&.active {
				background: url(../../assets/images/delete02.png) no-repeat left center;
				background-size: 12px 13px;
			}
		}
	}

	.nolistdata {
		padding: 0 10px;
		color: #b4bec9;
	}

	.list {
		width: 100%;
		padding: 15px 0;
		max-height: calc(100vh - 320px);
		overflow-y: scroll;
		position: relative;


		&:hover::-webkit-scrollbar {
			width: 3px;
		}

		.itemTitle {
			width: 100%;
			padding: 0 10px;
			height: 50px;
			position: relative;

			&.topItem {
				background: #eef0f1;
			}
		}

		.listItem {
			width: 100%;
			padding-left: 36px;
			height: 50px;
			box-sizing: border-box;
			line-height: 50px;
			font-size: 14px;
			border-radius: 8px;
			cursor: pointer;
			position: relative;
			color: #666666;

			&::before {
				background: url(../../assets/images/icon_message.png) no-repeat;
				background-size: 100%;
				width: 16px;
				height: 16px;
				position: absolute;
				left: 10px;
				top: 50%;
				transform: translateY(-50%);
				content: '';
				border-radius: 50%;
			}

			&.disable::before {
				display: none
			}

			.checkBtn {
				position: absolute;
				left: 0;
				top: 0;
				width: 36px;
				height: 100%;

				&::before {
					width: 10px;
					height: 10px;
					border: solid 1px #267bf7;
					border-radius: 50%;
					position: absolute;
					left: 10px;
					top: 50%;
					margin-top: -5px;
					content: '',
				}

				&.active::before {
					background: #267bf7;
				}
			}

			.editTitle {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				border: solid 1px #4955f5;
				border-radius: 8px;

				.text {
					width: 100%;
					height: 100%;
					background: none;
					outline: none;
					padding: 0 10px;
				}
			}

			.title {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				height: 100%;
				display: block;
			}

			.del,
			.top,
			.edit {
				width: 18px;
				height: 18px;
				position: absolute;
				display: block;
				top: 15px;
				border-radius: 50%;
				display: none;
				transition: all .8s;
			}

			.del {
				background: url(../../assets/images/icon_del.png) no-repeat center center;
				background-size: auto 12px;
				right: 10px;

				&:hover {
					background: url(../../assets/images/icon_del01.png) no-repeat center center #e5f2ff;
					background-size: auto 12px;
				}
			}

			.top {
				background: url(../../assets/images/icon_top.png) no-repeat center center;
				background-size: auto 12px;
				right: 50px;

				&:hover {
					background: url(../../assets/images/icon_top01.png) no-repeat center center #e5f2ff;
					background-size: auto 12px;
				}
			}

			.edit {
				background: url(../../assets/images/icon_edit.png) no-repeat center center;
				background-size: auto 12px;
				right: 30px;

				&:hover {
					background: url(../../assets/images/icon_edit01.png) no-repeat center center #e5f2ff;
					background-size: auto 12px;
				}
			}

			&.active {
				background: #fff;
				box-shadow: 0 0 7px rgba(166, 182, 229, .19);
				color: #2379f7;

				&::before {
					box-shadow: 0 0 7px rgba(35, 121, 247, .42);
				}
			}

			&:hover {
				background: #fff;
				box-shadow: 0 0 7px rgba(166, 182, 229, .19);

				&::before {
					box-shadow: 0 0 7px rgba(35, 121, 247, .42);
				}

				.del,
				.top,
				.edit {
					display: block;
				}

				.title {
					padding-right: 75px;
				}
			}

		}
	}
}
.newQues {
	width: 100%;
	padding:10px 0 0;
	&.none{
		padding:0;
	}
	.name{
		font-size: 13px;
		color: #5f7298;
		line-height: 40px;
		background: url(../../assets/images/icon_tjwt.png) no-repeat left center;
		background-size: 13px 12px;
		padding-left:20px;
		&.company{
			background: url(../../assets/images/icon_qywt.png) no-repeat left center;
			background-size: 13px 12px;
		}
	}
	.newBox{
		width: calc(100% + 10px);
		margin-left: -5px;
		overflow:hidden;
	}
	.newList {
		width: calc(100% + 10px);
		margin-left: -5px;
		// display: flex;
		// height:34px;
		.newItem {
			background: #fcfdfe;
			border: solid 1px #dceaf8;
			color: #5f7298;
			font-size: 12px;
			line-height: 22px;
			padding:5px 8px;
			display: inline-block;
			border-radius: 5px;
			margin:0 5px 10px 5px;
			min-height:34px;
			// flex: 1; 
			// overflow: hidden; 
			// white-space: nowrap; 
			// text-overflow: ellipsis; 
			cursor: pointer;

			&:hover {
				color: #2379f7;
			}
		}
	}
	.searchBox{
		width: calc(100% + 10px);
		margin-left: -5px;
		overflow:hidden;
	}
	.searchList{
		width: calc(100% + 10px);
		margin-left: -5px;
		.searchItemBox{
			margin-bottom:10px;
			width:100%;
		}
		.searchItem{
			display:inline-block;
			background:#fcfdfe;
			border: solid 1px #dceaf8;
			min-height:34px;
			line-height:32px;
			font-size:12px;
			color:#5f7298;
			border-radius:5px;
			padding:0 10px 0 5px;
			cursor:pointer;
			margin:0 5px 5px 5px;
			.comp{
				background: url(../../assets/images/icon_qy.png) no-repeat 4px center #e9f0fa;
				background-size: 19px 18px;
				color:#2379f7;
				height:28px;
				margin:2px 10px 2px -3px;
				box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.83);
				padding:0 5px 0 25px;
				line-height: 28px;
				display: inline-block;
				border-radius:5px;
			}
		}
	}
}

.sessionBox {
	flex: 1;
	max-height: 100vh;
	background: #e9f0fa;
	overflow-y: scroll;
	position: relative;

	// scroll-behavior: smooth;
	// transition:all .1s;
	&.none {
		overflow: hidden;
	}

	.temBtn {
		position: fixed;
		background: url(../../assets/images/tem03.png) no-repeat;
		background-size: 100%;
		width: 84px;
		height: 23px;
		top: 480px;
		right: calc((100% - 1060px)/2);
		z-index: 1001;
		margin-right: 60px;

		.tie {
			position: absolute;
			top: 0;
			left: -10px;
			background: url(../../assets/images/guide_btn.png) no-repeat;
			background-size: 100%;
			width: 21px;
			height: 21px;
		}
	}

	.talktem {
		background: url(../../assets/images/tem02.png) no-repeat center 30px #e9f0fa;
		background-size: auto auto;
		position: fixed;
		left: 280px;
		width: calc(100% - 300px);
		z-index: 10;
		height: 100vh;
	}

	.quesCon {
		width: 780px;
		margin: 0 auto;
		padding: 30px 0 190px 0;

		.loadgin {
			text-align: center;
			color: #666;
		}
	}

	.askCon {
		width: 780px;
		min-height: 150px;
		position: fixed;
		bottom: 0;
		background: #e9f0fa;
		left: calc((100% - 280px) / 2 + 280px);
		z-index: 100;
		padding: 0 0 15px 0;
		margin-left: -390px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all .8s;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}

		&::before {
			content: '';
			top: -10px;
			width: 100%;
			height: 10px;
			position: absolute;
			left: 0;
			background-image: linear-gradient(to top, #e9f0fa, rgba(233, 240, 250, .3));
		}

		&.guide {
			&::before {
				display: none;
			}
		}

		.tie {
			position: absolute;
			top: 50%;
			margin-top: -10px;
			left: -10px;
			background: url(../../assets/images/guide_btn.png) no-repeat;
			background-size: 100%;
			width: 21px;
			height: 21px;
		}

		&.guide {
			background: none;
			z-index: 999;
		}

		&.active {
			// width:100%;
			left: 50%;
			padding: 15px 20px;
		}

		.textBox {
			width: 780px;
			min-height: 75px;
			position: relative;
			display: flex;
			border-radius: 8px;
			padding: 8px 10px 30px 10px;
			box-sizing: border-box;
			box-shadow: 0 3px 7px rgba(166, 182, 229, .4);
			background: #fff;

			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				content: '';
				border: solid 1px #5d9cf9;
				opacity: 0;
				border-radius: 10px;
			}

			&.active::before,
			&:hover::before {
				opacity: 1;
			}
		}

		.uploadFile {
			background: url(../../assets/images/entry.png) no-repeat center center;
			background-size: 17px 17px;
			width: 20px;
			height: 20px;
		}

		.textCon {
			flex: 1;
			background: none;
			min-height: 38px;
			line-height: 24px;
			font-size: 16px;
			color: #666;
			overflow-y: hidden;
			outline: none;
			padding: 0;
			position: relative;
			z-index: 20;
			resize: none;
			font-family: 'siyuanR';
			box-sizing: border-box;

			&.disable {
				color: #c4d0ea;
			}

			&::-webkit-input-placeholder {
				color: #c4d0ea;
			}

			&:focus {
				outline: none;
				border: none;
			}
		}

		.btnPlug {
			background: #fcfdfe;
			width: auto;
			height: 36px;
			position: absolute;
			left: 0;
			top: -40px;
			color: #64b4fe;
			font-size: 13px;
			line-height: 25px;
			padding: 0 10px;
			cursor: pointer;
			z-index: 20;
			transition: all .5s;
			border-radius: 5px;

			.add,
			.close {
				width: 12px;
				height: 12px;
				display: inline-block;
				margin-left: 5px;
				transition: all .2s;
			}

			.add {
				background: url(../../assets/images/add.png) no-repeat;
				background-size: 100%;
			}

			.close {
				background: url(../../assets/images/close.png) no-repeat;
				background-size: 100%;
			}

			.icon {
				height: 12px;
				width: auto;
				margin-left: 5px;
			}

			&:hover,
			&.active {
				background: #4b90f6;
				color: #fff;

				.add {
					background: url(../../assets/images/add02.png) no-repeat;
					background-size: 100%;
				}
			}
		}

		.btnEnter {
			background: url(../../assets/images/btnenter.png) no-repeat;
			background-size: 100% 100%;
			width: 36px;
			height: 32px;
			position: absolute;
			right: 18px;
			bottom: 10px;
			transition: all .5s;
			cursor: pointer;
			z-index: 20;

			&.run {
				background: url(../../assets/images/load.gif) no-repeat;
				background-size: 100% 100%;
				width: 55px;
				height: 37px;
			}

			&:hover {
				transform: scale(1.1);
			}
		}

		.mark {
			font-size: 12px;
			color: #9094b0;
			width: 100%;
			display: block;
			line-height: 20px;
			padding: 10px 20px;
			text-align: center;
			font-family: 'siyuanR';
		}

	}
}

.chatAnswer {
	box-shadow: 0 0 10px rgba(0, 0, 0, .05);
	background: #fdfdfe;
	border-radius: 10px;
	width: auto;
	max-width: 100%;
	padding: 20px 30px;
	position: relative;
	z-index: 10;
	min-width: 80px;
	font-size: 14px;
	line-height: 24px;
	width: max-content;
	transition: all .5s;

	.chatView {
		color: #333;
	}

	&.markdown-body {
		position: relative;
		z-index: 6;
		font-size: 15px;
		width: 680px;
		font-family: 'siyuanR';
		color: #3d434e;
		letter-spacing: 0.75px;
	}

	&.active {
		&.markdown-body {
			width: 100%;
		}

		&::after {
			content: "|";
			color: #000;
			-webkit-animation: blink-data-v-4c6861f6 1s steps(5, start) infinite;
			animation: blink-data-v-4c6861f6 1s steps(5, start) infinite;
		}
	}

	&.runing {
		&::after {
			display: none;
		}
	}

	@-webkit-keyframes blink-data-v-4c6861f6 {

		0%,
		to {
			visibility: hidden
		}

		50% {
			visibility: visible
		}
	}

	@keyframes blink-data-v-4c6861f6 {

		0%,
		to {
			visibility: hidden
		}

		50% {
			visibility: visible
		}
	}

	.linkbox {
		width: 100%;
		background: #f1f5fb;
		padding: 10px 15px;
		line-height: 28px;
		color: #3a6abd;
		font-size: 14px;
		margin-bottom: 10px;
		border-radius: 5px;
		position: relative;

		.btnclose {
			position: absolute;
			font-size: 11px;
			right: 5px;
			bottom: 0;
			color: #3d434e;
			opacity: 0.5;
			padding-right: 20px;
			cursor: pointer;

			&::after {
				position: absolute;
				right: 0;
				width: 20px;
				height: 100%;
				background: url(../../assets/images/btnup.png) no-repeat center center;
				background-size: 8px 5px;
				content: '';
				top: 0;
				z-index: 10;
			}

			&.active {
				&::after {
					transform: rotate(180deg);
				}
			}
		}

		a {
			color: #64b4fe;
			text-decoration: underline;
		}
	}
}
.mianBox{
	max-width:100%;
}
.quesBox {
	width: 100%;
	display: flex;
	padding: 0 50px 25px 50px;
	position: relative;

	&.user {
		justify-content: end;
	}

	&.wapuser {
		justify-content: start;
	}

	.userPic {
		width: 42px;
		height: 42px;
		overflow: hidden;
		border-radius: 50%;
		position: absolute;
		top: 0;

		.videoLoad {
			// width:42px;
			// height:42px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			object-fit: cover;
		}

		&.user {
			border: solid 1px #82adfc;
			right: 0;
		}

		&.run {
			background: #fff;
			border: solid 1px #dfe4eb;
		}

		&.system {
			left: 0;

			&.active {
				border: solid 1px #d4dbe4;
				background: #fff;
			}
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.quertitle {
		font-size: 15px;
		line-height: 30px;
		color: #fff;
		background: #2379f7;
		border-radius: 8px;
		padding: 8px 25px;
		width: auto;
		max-width: 100%;
		box-shadow: 0 0 10px rgba(0, 0, 0, .05);
		cursor: pointer;
		transition: all .5s;
		font-family: 'siyuanR';
		letter-spacing: 0.75px;

		&.selected {
			// user-select: text;
			background-color: #f1f5fb;
			color: #3a6abd;
		}
		&.pdf{
			background: url(../../assets/images/icon-pdf.png) no-repeat 10px 10px #2379f7;
			background-size:auto 25px;
			padding: 8px 25px 8px 38px;

		}
		&.doc{
			background: url(../../assets/images/icon-doc.png) no-repeat 10px 10px #2379f7;
			background-size:auto 25px;
			padding: 8px 25px 8px 38px;

		}
		&.xls{
			background: url(../../assets/images/icon-XLS.png) no-repeat 10px 10px #2379f7;
			background-size:auto 25px;
			padding: 8px 25px 8px 38px;

		}
		&.ppt{
			background: url(../../assets/images/icon-PPT.png?v=100) no-repeat 10px 10px #2379f7;
			background-size:auto 25px;
			padding: 8px 25px 8px 38px;
		
		}
		&.other{
			background: url(../../assets/images/icon-TXT.png) no-repeat 10px 10px #2379f7;
			background-size:auto 20px;
			padding: 8px 25px 8px 38px;

		}
	}

	.eidtBox {
		width: 100%;
		height: 20px;
		margin-top: 15px;
		position: relative;

		&.active {
			min-width: 400px;
		}
	}

	.btnpage {
		position: absolute;
		right: -55px;
		width: 55px;
		z-index: 99;

		.button-prev,
		.button-next {
			width: 15px;
			height: 20px;
			cursor: pointer;
			display: block;
			display: flex;
			align-items: center;
			justify-content: center;
			float: left;

			img {
				width: 12px;
				height: 12px;
				object-fit: cover;
			}

		}

		.count {
			line-height: 20px;
			width: 25px;
			text-align: center;
			letter-spacing: 2px;
			font-size: 10px;
			color: #666;
			float: left;
		}

		.button-next {
			transform: rotate(180deg);
		}

		&.pc {
			top: 5px;
		}

		&.mobile {
			width: 100%;
			border-top: solid 1px #e7f0f9;
			bottom: 75px;
			right: 0;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: end;
			padding-right: 10px;

			.count {
				width: 30px;
			}
		}
	}

	.answer {
		font-family: 'siyuanR';
		color: $titleColor;
		flex: 1;
		font-size: 14px;
		position: relative;
		max-width: 100%;
		width: auto;

		&.active,
		&.multiple {
			padding-bottom: 15px;
		}

		.generate {
			position: absolute;
			bottom: 0;
			color: #2379f7;
			font-size: 12px;
			line-height: 20px;
			left: 0;
			cursor: pointer;
			z-index: 99;
			min-width: 200px;

			&.beging {
				background: url(../../assets/images/loading.gif) no-repeat left center;
				background-size: 20px 20px;
				padding-left: 25px;
			}

			&.disable {
				cursor: default;
				opacity: 0.5;
			}
		}

		.manage {
			background: #fff;
			width: auto;
			height: 22px;
			border-radius: 20px;
			display: flex;
			float: right;

			.voice {
				background: url(../../assets/images/icon_voice.png) no-repeat center center;
				background-size: 15px 15px;
				width: 35px;
				height: 100%;
				padding: 0 10px;

			}

			.becopy {
				width: 35px;
				padding: 0 10px;
				height: 100%;
				background: url(../../assets/images/icon_copy2.png) no-repeat center center;
				background-size: 15px 15px;
			}

			.belike {
				width: auto;
				height: 100%;
				font-size: 12px;
				background: url(../../assets/images/icon_like01.png) no-repeat 8px center;
				background-size: 15px 15px;
				color: #4a90f5;
				overflow: hidden;
				line-height: 20px;
				padding: 0 10px 0 30px;
				border: solid 1px #4a90f5;
				border-radius: 20px;

			}
		}

		.copy {
			position: absolute;
			bottom: 0;
			width: 84px;
			height: 22px;
			cursor: pointer;
			display: block;
			padding: 0 8px 0 25px;
			color: #9094b0;
			font-size: 12px;
			border-radius: 5px;
			line-height: 20px;
			border: solid 1px #fff;
			transition: all .5s;

			&:hover {
				border: solid 1px #4a90f5;
			}
		}

		.like {
			position: absolute;
			bottom: 0;
			width: 84px;
			height: 22px;
			cursor: pointer;
			display: block;
			padding: 0 0 0 25px;
			font-size: 12px;
			border-radius: 5px;
			line-height: 20px;
			border: solid 1px #fff;
			transition: all .5s;
			right: 0;
			border: solid 1px #4a90f5;
			background: url(../../assets/images/icon_like01.png) no-repeat 8px center #fcfdfe;
			background-size: 11px 11px;
			color: #4a90f5;
			overflow: hidden;

			&:hover {
				border: solid 1px #4a90f5;
			}

			i {
				position: relative;
				font-style: normal;
				z-index: 10;
			}

			.videoCon {
				// width: 25px;
				// height: 25px;
				position: absolute;
				left: 0px;
				top: -2px;
			}

			.dianzan {
				width: 25px;
				height: 20px;
				position: absolute;
				left: 0;
				top: 1px;
				overflow: hidden;

				img {
					width: 36px;
					height: 36px;
				}
			}

			&:hover {
				background: url(../../assets/images/icon_like02.png) no-repeat 8px center #4a90f5;
				background-size: 11px 11px;
				color: #fff;
				border: solid 1px #4a90f5;
			}

			&.active {
				background: url(../../assets/images/icon_like02.png) no-repeat 8px center #4a90f5;
				background-size: 11px 11px;
				color: #fff;
				border: solid 1px #4a90f5;
			}

			&.isEnd {
				background: url(../../assets/images/icon_like02.png) no-repeat 8px center #fcfdfe;
				background-size: 11px 11px;
				color: #4a90f5;
			}
		}

		.copy {
			background: url(../../assets/images/icon_copy.png) no-repeat 8px center #fcfdfe;
			background-size: 11px 12px;
			right: 95px;
			border: solid 1px #dceaf8;

			&:hover {
				background: url(../../assets/images/icon_copy01.png) no-repeat 8px center #fcfdfe;
				background-size: 11px 12px;
				color: #4a90f5;
			}

			&.active {
				background: url(../../assets/images/icon_copy02.png) no-repeat 8px center #4a90f5;
				background-size: 11px 12px;
				color: #fff;
				border: solid 1px #4a90f5;
			}
		}

		.errorAnswer {
			background: rgba(186, 208, 245, .6);
			padding: 20px 30px;
			width: 360px !important;

			.errorText {
				padding: 10px 10px;
				border: solid 1px #ef4444;
				background: rgba(241, 74, 70, .1);
				border-radius: 5px;
				color: #96384e;
				font-size: 14px;
			}
		}

		.answerBox {
			border-radius: 10px;
			width: 100%;
			position: relative;
			z-index: 6;
			.subscript {
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 999;
				height: 20px;
			}
			.source{
				background: url(../../assets/images/icon_link.png) no-repeat 13px center #e9f0fa;
				background-size: 9px 12px;
				border-radius:5px;
				border:solid 1px #e9f0fa;
				height:34px;
				line-height:32px;
				padding:0 15px 0 28px;
				color:#2379f7;
				display:inline-block;
				font-size:12px;
				cursor:pointer;
			}
		}

		&.active {

			.answerBox::after,
			.answerBox::before {
				position: absolute;
				width: calc(100% - 16px);
				left: 8px;
				bottom: -5px;
				background: #f7fafe;
				border-radius: 5px;
				content: '';
				height: 100%;
				box-shadow: 0 3px 7px rgba(166, 182, 229, 0.2);
				opacity: 0.5;
			}

		}

		&.multiple {
			.answerBox::before {
				position: absolute;
				border-radius: 5px;
				content: '';
				height: 100%;
				box-shadow: 0 3px 7px rgba(166, 182, 229, 0.2);
				bottom: -12px;
				width: calc(100% - 30px);
				left: 15px;
				background: #e9eef4;

			}
		}
	}
}

@media screen and (max-width: 1080px) {
	.sessionBox {
		.quesCon {
			width: calc(100% - 30px);
			margin: 0 15px;
		}

		.askCon {
			width: calc(100% - 290px);
			margin-left: 0;
			left: 285px;

			.textBox {
				width: 100%;
			}

			&.active {
				left: 0;
				width: 100%;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.sessionBox {
		margin-top: 45px;

		.quesCon {
			width: calc(100% - 20px);
			margin: 0 10px;
		}

		.askCon {
			left: 0;
			width: calc(100% - 5px);
			padding: 5px 5px 25px 10px;
			min-height: 80px;
			margin-left: 0;
			bottom: 0;

			.textBox {
				width: 100%;
			}

			.tie {
				top: 5px;
				width: 16px;
				height: 16px;
				left: -5px;
			}

			.textCon {
				font-size: 14px;
				box-sizing: border-box;
			}

			.mark {
				font-size: 10px;
				line-height: 14px;
			}
		}

	}

	.quesBox {
		padding: 0 0 25px 40px;

		.quertitle {
			padding: 5px 15px;
		}

		.userPic {
			width: 36px;
			height: 36px;
		}

		.eidtBox {
			&.active {
				min-width: 200px;
			}
		}
	}

	.chatAnswer {
		padding: 10px 8px;

		&.long {
			padding: 10px 8px 50px 8px;
		}

		&.markdown-body {
			width: 100%;
			font-size: 14px;
		}

		.linkbox {
			font-size: 12px;
			line-height: 22px;
		}
	}

	.waptalktem {
		background: url(../../assets/images/tem05.png) no-repeat center top #e9f0fa;
		background-size: 100% 100%;
		position: fixed;
		top: 45px;
		left: 0;
		width: 100%;
		z-index: 10;
		height: 734.5px;
	}

	.newQues {
		.newList {
			.newItem {
				line-height: 18px;
			}
		}
	}

}

.btnlink {
	border-radius: 5px;
	background: #f1f5fb;
	color: #333;
	padding: 0 20px 0 8px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 5px;
	display: inline-block;
	position: relative;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	max-width: 100%;
	overflow: hidden;
	font-size: 14px;

	&::after {
		position: absolute;
		right: 0;
		width: 20px;
		height: 100%;
		background: url(../../assets/images/btnup.png) no-repeat center center;
		background-size: 8px 5px;
		content: '';
		top: 0;
		z-index: 10;
	}

	p {
		margin-bottom: 0;
		color: #333;

		a {
			color: #2379f7;
			text-decoration: underline !important;
		}
	}

	&.active {
		&::after {
			transform: rotate(180deg);
		}
	}
}

.videoBtn {
	position: relative;
	width: 100%;
	height: 30px;
	box-sizing: border-box;
	margin-bottom: 10px;

	.audioBtn {
		position: relative;
		width: 120px;
		float: right;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: start;
		cursor: pointer;

		&::before,
		&::after {
			position: absolute;
			content: '';
			top: 50%;
			transform: translateY(-50%);
		}

		.btnplay {
			background: url(../../assets/images/play02.png) no-repeat center center;
			background-size: 100%;
			width: 20px;
			height: 20px;
			margin-right: 10px;

			&.pause {
				background: url(../../assets/images/pause02.png) no-repeat;
				background-size: 100%;
			}

			&.disable {
				background: url(../../assets/images/loading.gif) no-repeat;
				background-size: 100%;
			}
		}

		.wave {
			background: url(../../assets/images/line02.png) no-repeat left center;
			background-size: 86px 15px;
			flex: 1;
			height: 100%;

		}

	}

	.voice-line-wrap {
		display: flex;
		align-items: center;

		.voice-line {
			width: 2px;
			height: var(--line-height);
			border-radius: 2px;
			margin: 0 2px;
		}

		.one {
			animation: wave 0.4s 1s linear infinite alternate;
		}

		.two {
			animation: wave 0.4s 0.9s linear infinite alternate;
		}

		.three {
			animation: wave 0.4s 0.8s linear infinite alternate;
		}

		.four {
			animation: wave 0.4s 0.7s linear infinite alternate;
		}

		.five {
			animation: wave 0.4s 0.6s linear infinite alternate;
		}

		.six {
			animation: wave 0.4s 0.5s linear infinite alternate;
		}

		.seven {
			animation: wave 0.4s linear infinite alternate;
		}
	}

	@keyframes wave {
		0% {
			transform: scale(1, 1);
			background-color: #999999;
		}

		100% {
			transform: scale(1, 0.2);
			background-color: #999999;
		}
	}
}





//张晓东那个
.comitemC{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	cursor: pointer;
	.xz{
		width: 16px;
		height: 16px;
		// background: red;
		margin-right: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		.xzh{
			width: 12px;
			height: 12px;
			background: url('../../assets/miscel/se2.png') no-repeat center center;
			background-size: 12px 12px;
			
		}
		&.act{
			.xzh{
				background: url('../../assets/miscel/se1.png') no-repeat center center!important;
				background-size: 12px 12px!important;
			}
		}
	}
	&:hover{
		.xz{
			.xzh{
				background: url('../../assets/miscel/se1.png') no-repeat center center!important;
				background-size: 12px 12px!important;
			}
		}
	}
	
	.comicName{
		cursor: pointer;
		
	}	
	.comicNameS{
		color: #999;
		font-size: 14px;
		line-height: 32px;
		&.Act,&:hover{
			color: #2379f7!important;
			text-decoration: underline;
		}
	}
}

.zhinxj{
	margin-bottom: 10px;
	.wenda{
		width: 100%;
		height: 40px;
		background: #f1f5fb;
		font-size: 14px;
		color: #3a6abd;
		padding: 0 15px;
		border-radius: 10px;
		line-height: 40px;
	}
}
.znbj{
	width:100%;
	background: #f1f5fb;
	padding: 10px;
	margin-bottom: 10px;
	position: relative;

	
	
}

.dialog1{
		position: absolute;
		width: 300px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px 1px rgba(166, 182, 229, 0.2);
		padding: 10px 20px;
		left: 0;
		top: 0;
		// transform: translate(-50%,-50%);
		z-index: 999;
		
		.title1{
			color: #1b56b6;
			line-height: 28px;
			text-align: left;
			white-space: nowrap;
			font-size: 14px;
			margin-bottom: 16px;
			display: block;
			.show1{
				display: block;
			}
			
		}
		
		.btnpage1{
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding: 10px 0;
			font-size: 14px;
			.cancel1{
				border: solid 1px #afb2c5;
				color: #afb2c5;
				height: 30px;
				border-radius: 5px;
				width: 90px;
				margin-right: 10px;
				cursor: pointer;
			}
			.flexC1{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.define1{
				color: #fff;
				height: 30px;
				border-radius: 5px;
				background: #2379ff;
				width: 90px;
				cursor: pointer;
				
				
			}
		}
	
	}
	
	
	.znxjTex{
		width: 100%;
		margin-bottom: 10px;
		.znxjTexInput{
			width: 100%;
			font-size: 14px;
		}
	}
	.znxjWidht{
		flex: 1;
		width: 0;
	}
	
	.znxjCon{
		background: #f4f4f5;
		padding: 10px 15px;
		box-sizing: border-box;
		width: 100%;
		border-radius: 6px;
		margin-bottom: 10px;
		.znxjCo{
			font-size: 12px;
			line-height: 26px;
			color: #999;
		}
	}
	
	
</style>
